First working version

Playground/js/index.js

@@ -504,20 +504,6 @@ function showError(errorMessage, errorEvent) {
                 jsEditor.updateOptions({ readOnly: false });
 
                 if (document.getElementsByClassName('insp-wrapper').length > 0) {
-                    for (var i = 0; i < engine.scenes.length; i++) {
-                        if (engine.scenes[i]._debugLayer) {
-                            //TODO: once inspector is updated on netlify, use getActiveTabIndex instead of the following loop
-                            //initialTabIndex = engine.scenes[i]._debugLayer._inspector.getActiveTabIndex();
-                            var tabs = engine.scenes[i]._debugLayer._inspector._tabbar._tabs;
-                            for (var j = 0; j < tabs.length; j++) {
-                                if (tabs[j].isActive()) {
-                                    initialTabIndex = j;
-                                    break;
-                                }
-                            }
-                            break;
-                        }
-                    }
                     showInspector = true;
                 } else if (document.getElementById('DebugLayer')) {
                     showDebugLayer = true;
@@ -643,13 +629,8 @@ function showError(errorMessage, errorEvent) {
                     }
 
                     if (scene) {
-                        if (showInspector) {
-                            scene.debugLayer.show({ initialTab: initialTabIndex });
-                            scene.executeWhenReady(function() {
-                                scene.debugLayer._inspector.refresh();
-                            })
-                        } else if (showDebugLayer) {
-                            scene.debugLayer.show();
+                        if (showInspector || showDebugLayer) {
+                            scene.debugLayer.show({ embedMode: true });
                         }
                     }
                 });
@@ -906,7 +887,7 @@ function showError(errorMessage, errorEvent) {
 
             if (scene.debugLayer.isVisible()) {
                 scene.debugLayer.hide();  // Because when you close it with the cross, it doesn't call hide(), so you have to do it in code
-                scene.debugLayer.show();
+                scene.debugLayer.show({ embedMode: true });
             }
         }
 
@@ -974,7 +955,7 @@ function showError(errorMessage, errorEvent) {
             }
             else {
                 scene.debugLayer.hide(); // Because when you close it with the cross, it doesn't call hide(), so you have to do it in code
-                scene.debugLayer.show();
+                scene.debugLayer.show({ embedMode: true });
             }
         }
 

Tools/DevLoader/BabylonLoader.js

@@ -1,12 +1,12 @@
 // Old Fashion Way for IE 11 Devs. Yes, that still exists ;-)
 
 var BABYLONDEVTOOLS;
-(function (BABYLONDEVTOOLS) {
+(function(BABYLONDEVTOOLS) {
 
-    var getJson = function (url, callback, errorCallback) {
+    var getJson = function(url, callback, errorCallback) {
         var xhr = new XMLHttpRequest();
         xhr.open('GET', url);
-        xhr.onload = function () {
+        xhr.onload = function() {
             if (this.status >= 200 && this.status < 300) {
                 var data = JSON.parse(xhr.response);
                 callback(data)
@@ -17,7 +17,7 @@ var BABYLONDEVTOOLS;
                 });
             }
         };
-        xhr.onerror = function () {
+        xhr.onerror = function() {
             errorCallback({
                 status: this.status,
                 statusText: xhr.statusText
@@ -26,11 +26,12 @@ var BABYLONDEVTOOLS;
         xhr.send();
     }
 
-    var Loader = (function () {
+    var Loader = (function() {
         var queue;
         var callback;
         var dependencies;
         var useDist;
+        var testMode;
         var min;
         var babylonJSPath;
 
@@ -43,10 +44,10 @@ var BABYLONDEVTOOLS;
             babylonJSPath = '';
         }
 
-        Loader.prototype.debugShortcut = function (engine) {
+        Loader.prototype.debugShortcut = function(engine) {
             // Add inspector shortcut
             var map = {};
-            var onkey = function (e) {
+            var onkey = function(e) {
                 e = e || event; // to deal with IE
                 map[e.keyCode] = e.type == 'keydown';
                 if (map[17] && map[16] && map[18] && map[73]) {
@@ -69,12 +70,12 @@ var BABYLONDEVTOOLS;
             document.addEventListener("keyup", onkey);
         }
 
-        Loader.prototype.root = function (newBabylonJSPath) {
+        Loader.prototype.root = function(newBabylonJSPath) {
             babylonJSPath = newBabylonJSPath;
             return this;
         }
 
-        Loader.prototype.require = function (newDependencies) {
+        Loader.prototype.require = function(newDependencies) {
             if (typeof newDependencies === 'string') {
                 dependencies.push(newDependencies);
             }
@@ -86,17 +87,22 @@ var BABYLONDEVTOOLS;
             return this;
         }
 
-        Loader.prototype.onReady = function (newCallback) {
+        Loader.prototype.onReady = function(newCallback) {
             callback = newCallback;
             return this;
         }
 
-        Loader.prototype.useDist = function () {
+        Loader.prototype.testMode = function() {
+            testMode = true;
+            return this;
+        }
+
+        Loader.prototype.useDist = function() {
             useDist = true;
             return this;
         }
 
-        Loader.prototype.dequeue = function () {
+        Loader.prototype.dequeue = function() {
             if (queue.length == 0) {
                 console.log('Scripts loaded');
                 BABYLON.Engine.ShadersRepository = "/src/Shaders/";
@@ -114,17 +120,17 @@ var BABYLONDEVTOOLS;
             script.src = url;
 
             var self = this;
-            script.onload = function () {
+            script.onload = function() {
                 self.dequeue();
             };
             head.appendChild(script);
         }
 
-        Loader.prototype.loadScript = function (url) {
+        Loader.prototype.loadScript = function(url) {
             queue.push(url);
         }
 
-        Loader.prototype.loadCss = function (url) {
+        Loader.prototype.loadCss = function(url) {
             var head = document.getElementsByTagName('head')[0];
 
             var style = document.createElement('link');
@@ -134,13 +140,13 @@ var BABYLONDEVTOOLS;
             document.head.appendChild(style);
         }
 
-        Loader.prototype.loadScripts = function (urls) {
+        Loader.prototype.loadScripts = function(urls) {
             for (var i = 0; i < urls.length; i++) {
                 this.loadScript(urls[i]);
             }
         }
 
-        Loader.prototype.loadLibrary = function (library, module) {
+        Loader.prototype.loadLibrary = function(library, module) {
             if (library.preventLoadLibrary) {
                 return;
             }
@@ -189,7 +195,7 @@ var BABYLONDEVTOOLS;
                 }
             }
             else {
-                if (module.build.distOutputDirectory)
+                if (module.build.distOutputDirectory && (!testMode || !module.build.ignoreInTestMode))
                     this.loadScript(babylonJSPath + '/dist/preview release' + module.build.distOutputDirectory + library.output);
             }
 
@@ -201,13 +207,13 @@ var BABYLONDEVTOOLS;
             }
         }
 
-        Loader.prototype.loadModule = function (module) {
+        Loader.prototype.loadModule = function(module) {
             for (var i = 0; i < module.libraries.length; i++) {
                 this.loadLibrary(module.libraries[i], module);
             }
         }
 
-        Loader.prototype.processDependency = function (settings, dependency, filesToLoad) {
+        Loader.prototype.processDependency = function(settings, dependency, filesToLoad) {
             if (dependency.dependUpon) {
                 for (var i = 0; i < dependency.dependUpon.length; i++) {
                     var dependencyName = dependency.dependUpon[i];
@@ -225,7 +231,7 @@ var BABYLONDEVTOOLS;
             }
         }
 
-        Loader.prototype.loadBJSScripts = function (settings) {
+        Loader.prototype.loadBJSScripts = function(settings) {
             var loadModules = true;
 
             // Main bjs files
@@ -262,13 +268,13 @@ var BABYLONDEVTOOLS;
             }
         }
 
-        Loader.prototype.load = function (newCallback) {
+        Loader.prototype.load = function(newCallback) {
             var self = this;
             if (newCallback) {
                 callback = newCallback;
             }
             getJson('/Tools/Gulp/config.json',
-                function (data) {
+                function(data) {
                     if (!min) {
                         self.loadScript('/dist/preview release/split.js');
                     }
@@ -280,7 +286,7 @@ var BABYLONDEVTOOLS;
 
                     self.dequeue();
                 },
-                function (reason) {
+                function(reason) {
                     console.error(reason);
                 }
             );

Tools/Gulp/config.json

@@ -1992,6 +1992,7 @@
             }
         ],
         "build": {
+            "ignoreInTestMode": true,
             "srcOutputDirectory": "../../inspector/src/",
             "distOutputDirectory": "/inspector/",
             "dtsBundle": {

dist/preview release/babylon.max.js

@@ -66674,38 +66674,37 @@ var BABYLON;
         /** Creates the inspector window. */
         DebugLayer.prototype._createInspector = function (config) {
             if (config === void 0) { config = {}; }
+            if (this.isVisible()) {
+                return;
+            }
             var popup = config.popup || false;
-            var initialTab = config.initialTab || 0;
             var parentElement = config.parentElement || null;
-            if (!this._inspector) {
-                this.BJSINSPECTOR = this.BJSINSPECTOR || typeof INSPECTOR !== 'undefined' ? INSPECTOR : undefined;
-                this._inspector = new this.BJSINSPECTOR.Inspector(this._scene, popup, initialTab, parentElement, config.newColors);
-            } // else nothing to do as instance is already created
+            this.BJSINSPECTOR = this.BJSINSPECTOR || typeof INSPECTOR !== 'undefined' ? INSPECTOR : undefined;
+            var options = {
+                popup: popup,
+                embedMode: config.embedMode != null ? config.embedMode : parentElement ? true : false,
+                embedHostRoot: null,
+                overlay: config.overlay,
+                handleResize: config.handleResize,
+                enablePopup: config.enablePopup
+            };
+            if (parentElement) {
+                options.embedHostRoot = parentElement;
+            }
+            this.BJSINSPECTOR.Inspector.Show(this._scene, options);
         };
         /**
          * Get if the inspector is visible or not.
          * @returns true if visible otherwise, false
          */
         DebugLayer.prototype.isVisible = function () {
-            if (!this._inspector) {
-                return false;
-            }
-            return true;
+            return this.BJSINSPECTOR.Inspector.IsVisible;
         };
         /**
          * Hide the inspector and close its window.
          */
         DebugLayer.prototype.hide = function () {
-            if (this._inspector) {
-                try {
-                    this._inspector.dispose();
-                }
-                catch (e) {
-                    // If the inspector has been removed directly from the inspector tool
-                }
-                this.onPropertyChangedObservable.clear();
-                this._inspector = null;
-            }
+            this.BJSINSPECTOR.Inspector.Hide();
         };
         /**
         *
@@ -66741,13 +66740,6 @@ var BABYLON;
             }
         };
         /**
-         * Gets the active tab
-         * @return the index of the active tab or -1 if the inspector is hidden
-         */
-        DebugLayer.prototype.getActiveTab = function () {
-            return this._inspector ? this._inspector.getActiveTabIndex() : -1;
-        };
-        /**
          * Define the url to get the inspector script from.
          * By default it uses the babylonjs CDN.
          * @ignoreNaming
@@ -78234,7 +78226,9 @@ var BABYLON;
                 if (!_this._loadingDiv) {
                     return;
                 }
-                document.body.removeChild(_this._loadingDiv);
+                if (_this._loadingDiv.parentElement) {
+                    _this._loadingDiv.parentElement.removeChild(_this._loadingDiv);
+                }
                 window.removeEventListener("resize", _this._resizeLoadingUI);
                 _this._loadingDiv = null;
             };

dist/preview release/babylon.no-module.max.js

@@ -66641,38 +66641,37 @@ var BABYLON;
         /** Creates the inspector window. */
         DebugLayer.prototype._createInspector = function (config) {
             if (config === void 0) { config = {}; }
+            if (this.isVisible()) {
+                return;
+            }
             var popup = config.popup || false;
-            var initialTab = config.initialTab || 0;
             var parentElement = config.parentElement || null;
-            if (!this._inspector) {
-                this.BJSINSPECTOR = this.BJSINSPECTOR || typeof INSPECTOR !== 'undefined' ? INSPECTOR : undefined;
-                this._inspector = new this.BJSINSPECTOR.Inspector(this._scene, popup, initialTab, parentElement, config.newColors);
-            } // else nothing to do as instance is already created
+            this.BJSINSPECTOR = this.BJSINSPECTOR || typeof INSPECTOR !== 'undefined' ? INSPECTOR : undefined;
+            var options = {
+                popup: popup,
+                embedMode: config.embedMode != null ? config.embedMode : parentElement ? true : false,
+                embedHostRoot: null,
+                overlay: config.overlay,
+                handleResize: config.handleResize,
+                enablePopup: config.enablePopup
+            };
+            if (parentElement) {
+                options.embedHostRoot = parentElement;
+            }
+            this.BJSINSPECTOR.Inspector.Show(this._scene, options);
         };
         /**
          * Get if the inspector is visible or not.
          * @returns true if visible otherwise, false
          */
         DebugLayer.prototype.isVisible = function () {
-            if (!this._inspector) {
-                return false;
-            }
-            return true;
+            return this.BJSINSPECTOR.Inspector.IsVisible;
         };
         /**
          * Hide the inspector and close its window.
          */
         DebugLayer.prototype.hide = function () {
-            if (this._inspector) {
-                try {
-                    this._inspector.dispose();
-                }
-                catch (e) {
-                    // If the inspector has been removed directly from the inspector tool
-                }
-                this.onPropertyChangedObservable.clear();
-                this._inspector = null;
-            }
+            this.BJSINSPECTOR.Inspector.Hide();
         };
         /**
         *
@@ -66708,13 +66707,6 @@ var BABYLON;
             }
         };
         /**
-         * Gets the active tab
-         * @return the index of the active tab or -1 if the inspector is hidden
-         */
-        DebugLayer.prototype.getActiveTab = function () {
-            return this._inspector ? this._inspector.getActiveTabIndex() : -1;
-        };
-        /**
          * Define the url to get the inspector script from.
          * By default it uses the babylonjs CDN.
          * @ignoreNaming
@@ -78201,7 +78193,9 @@ var BABYLON;
                 if (!_this._loadingDiv) {
                     return;
                 }
-                document.body.removeChild(_this._loadingDiv);
+                if (_this._loadingDiv.parentElement) {
+                    _this._loadingDiv.parentElement.removeChild(_this._loadingDiv);
+                }
                 window.removeEventListener("resize", _this._resizeLoadingUI);
                 _this._loadingDiv = null;
             };

dist/preview release/es6.js

@@ -66641,38 +66641,37 @@ var BABYLON;
         /** Creates the inspector window. */
         DebugLayer.prototype._createInspector = function (config) {
             if (config === void 0) { config = {}; }
+            if (this.isVisible()) {
+                return;
+            }
             var popup = config.popup || false;
-            var initialTab = config.initialTab || 0;
             var parentElement = config.parentElement || null;
-            if (!this._inspector) {
-                this.BJSINSPECTOR = this.BJSINSPECTOR || typeof INSPECTOR !== 'undefined' ? INSPECTOR : undefined;
-                this._inspector = new this.BJSINSPECTOR.Inspector(this._scene, popup, initialTab, parentElement, config.newColors);
-            } // else nothing to do as instance is already created
+            this.BJSINSPECTOR = this.BJSINSPECTOR || typeof INSPECTOR !== 'undefined' ? INSPECTOR : undefined;
+            var options = {
+                popup: popup,
+                embedMode: config.embedMode != null ? config.embedMode : parentElement ? true : false,
+                embedHostRoot: null,
+                overlay: config.overlay,
+                handleResize: config.handleResize,
+                enablePopup: config.enablePopup
+            };
+            if (parentElement) {
+                options.embedHostRoot = parentElement;
+            }
+            this.BJSINSPECTOR.Inspector.Show(this._scene, options);
         };
         /**
          * Get if the inspector is visible or not.
          * @returns true if visible otherwise, false
          */
         DebugLayer.prototype.isVisible = function () {
-            if (!this._inspector) {
-                return false;
-            }
-            return true;
+            return this.BJSINSPECTOR.Inspector.IsVisible;
         };
         /**
          * Hide the inspector and close its window.
          */
         DebugLayer.prototype.hide = function () {
-            if (this._inspector) {
-                try {
-                    this._inspector.dispose();
-                }
-                catch (e) {
-                    // If the inspector has been removed directly from the inspector tool
-                }
-                this.onPropertyChangedObservable.clear();
-                this._inspector = null;
-            }
+            this.BJSINSPECTOR.Inspector.Hide();
         };
         /**
         *
@@ -66708,13 +66707,6 @@ var BABYLON;
             }
         };
         /**
-         * Gets the active tab
-         * @return the index of the active tab or -1 if the inspector is hidden
-         */
-        DebugLayer.prototype.getActiveTab = function () {
-            return this._inspector ? this._inspector.getActiveTabIndex() : -1;
-        };
-        /**
          * Define the url to get the inspector script from.
          * By default it uses the babylonjs CDN.
          * @ignoreNaming
@@ -78201,7 +78193,9 @@ var BABYLON;
                 if (!_this._loadingDiv) {
                     return;
                 }
-                document.body.removeChild(_this._loadingDiv);
+                if (_this._loadingDiv.parentElement) {
+                    _this._loadingDiv.parentElement.removeChild(_this._loadingDiv);
+                }
                 window.removeEventListener("resize", _this._resizeLoadingUI);
                 _this._loadingDiv = null;
             };

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

@@ -1,6 +1,6 @@
 /*Babylon.js GUI*/
 // Dependencies for this module:
-//   ../../../../Tools/gulp/babylonjs
+//   ../../../../Tools/Gulp/babylonjs
 declare module BABYLON.GUI {
 }
 declare module BABYLON.GUI {

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

@@ -1,6 +1,6 @@
 /*Babylon.js GUI*/
 // Dependencies for this module:
-//   ../../../../Tools/gulp/babylonjs
+//   ../../../../Tools/Gulp/babylonjs
 
 declare module 'babylonjs-gui' {
     export * from "babylonjs-gui/2D";
@@ -2985,7 +2985,7 @@ declare module 'babylonjs-gui/3D/materials/fluentMaterial' {
 
 /*Babylon.js GUI*/
 // Dependencies for this module:
-//   ../../../../Tools/gulp/babylonjs
+//   ../../../../Tools/Gulp/babylonjs
 declare module BABYLON.GUI {
 }
 declare module BABYLON.GUI {

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

@@ -1,394 +1,45 @@
-/*BabylonJS Inspector*/
+/*Babylon.js Inspector*/
 // Dependencies for this module:
-//   ../../../../Tools/gulp/react
-//   ../../../../Tools/gulp/babylonjs
-interface IActionTabsComponentProps {
-    onSelectionChangeObservable: BABYLON.Observable<any>;
-    scene: BABYLON.Scene;
-    onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
-    noCommands?: boolean;
-    noHeader?: boolean;
-    noExpand?: boolean;
-    popupMode?: boolean;
-    onPopup?: () => void;
-    onClose?: () => void;
-}
-export declare class ActionTabsComponent extends React.Component<IActionTabsComponentProps, {
-    selectedEntity: any;
-    selectedIndex: number;
-}> {
-    constructor(props: IActionTabsComponentProps);
-    componentWillMount(): void;
-    componentWillUnmount(): void;
-    renderContent(): JSX.Element;
-    onClose(): void;
-    onPopup(): void;
-    render(): JSX.Element;
-}
-interface ISceneExplorerFilterComponentProps {
-    onFilter: (filter: string) => void;
-}
-export declare class SceneExplorerFilterComponent extends React.Component<ISceneExplorerFilterComponentProps> {
-    constructor(props: ISceneExplorerFilterComponentProps);
-    render(): JSX.Element;
-}
-interface ISceneExplorerComponentProps {
-    scene: BABYLON.Scene;
-    noCommands?: boolean;
-    noHeader?: boolean;
-    noExpand?: boolean;
-    extensibilityGroups?: IExtensibilityGroup[];
-    onSelectionChangeObservable: BABYLON.Observable<any>;
-    popupMode?: boolean;
-    onPopup?: () => void;
-    onClose?: () => void;
-}
-export declare class SceneExplorerComponent extends React.Component<ISceneExplorerComponentProps, {
-    filter: BABYLON.Nullable<string>;
-    selectedEntity: any;
-    scene: BABYLON.Scene;
-}> {
-    constructor(props: ISceneExplorerComponentProps);
-    componentWillMount(): void;
-    componentWillUnmount(): void;
-    filterContent(filter: string): void;
-    findSiblings(items: any[], target: any, goNext: boolean, data: {
-        previousOne?: any;
-        found?: boolean;
-    }): boolean;
-    processKeys(keyEvent: React.KeyboardEvent<HTMLDivElement>): void;
-    renderContent(): JSX.Element | null;
-    onClose(): void;
-    onPopup(): void;
-    render(): JSX.Element;
-}
-export interface IExtensibilityOption {
-    label: string;
-    action: (entity: any) => void;
-}
-export interface IExtensibilityGroup {
-    predicate: (entity: any) => boolean;
-    entries: IExtensibilityOption[];
-}
-export interface IInspectorOptions {
-    overlay?: boolean;
-    sceneExplorerRoot?: HTMLElement;
-    actionTabsRoot?: HTMLElement;
-    embedHostRoot?: HTMLElement;
-    showExplorer?: boolean;
-    showInspector?: boolean;
-    explorerWidth?: string;
-    inspectorWidth?: string;
-    embedHostWidth?: string;
-    embedMode?: boolean;
-    handleResize?: boolean;
-    enablePopup?: boolean;
-    explorerExtensibility?: IExtensibilityGroup[];
-}
-export declare class Inspector {
-    static OnSelectionChangeObservable: BABYLON.Observable<string>;
-    static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
-    static Show(scene: BABYLON.Scene, userOptions: Partial<IInspectorOptions>): void;
-    static Hide(): void;
-}
-export declare class PropertyChangedEvent {
-    object: any;
-    property: string;
-    value: any;
-    initialValue: any;
-}
-/*BabylonJS Inspector*/
-// Dependencies for this module:
-//   ../../../../Tools/gulp/react
-//   ../../../../Tools/gulp/babylonjs
-interface IActionTabsComponentProps {
-    onSelectionChangeObservable: BABYLON.Observable<any>;
-    scene: BABYLON.Scene;
-    onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
-    noCommands?: boolean;
-    noHeader?: boolean;
-    noExpand?: boolean;
-    popupMode?: boolean;
-    onPopup?: () => void;
-    onClose?: () => void;
-}
-export declare class ActionTabsComponent extends React.Component<IActionTabsComponentProps, {
-    selectedEntity: any;
-    selectedIndex: number;
-}> {
-    constructor(props: IActionTabsComponentProps);
-    componentWillMount(): void;
-    componentWillUnmount(): void;
-    renderContent(): JSX.Element;
-    onClose(): void;
-    onPopup(): void;
-    render(): JSX.Element;
-}
-interface ISceneExplorerFilterComponentProps {
-    onFilter: (filter: string) => void;
-}
-export declare class SceneExplorerFilterComponent extends React.Component<ISceneExplorerFilterComponentProps> {
-    constructor(props: ISceneExplorerFilterComponentProps);
-    render(): JSX.Element;
-}
-interface ISceneExplorerComponentProps {
-    scene: BABYLON.Scene;
-    noCommands?: boolean;
-    noHeader?: boolean;
-    noExpand?: boolean;
-    extensibilityGroups?: IExtensibilityGroup[];
-    onSelectionChangeObservable: BABYLON.Observable<any>;
-    popupMode?: boolean;
-    onPopup?: () => void;
-    onClose?: () => void;
-}
-export declare class SceneExplorerComponent extends React.Component<ISceneExplorerComponentProps, {
-    filter: BABYLON.Nullable<string>;
-    selectedEntity: any;
-    scene: BABYLON.Scene;
-}> {
-    constructor(props: ISceneExplorerComponentProps);
-    componentWillMount(): void;
-    componentWillUnmount(): void;
-    filterContent(filter: string): void;
-    findSiblings(items: any[], target: any, goNext: boolean, data: {
-        previousOne?: any;
-        found?: boolean;
-    }): boolean;
-    processKeys(keyEvent: React.KeyboardEvent<HTMLDivElement>): void;
-    renderContent(): JSX.Element | null;
-    onClose(): void;
-    onPopup(): void;
-    render(): JSX.Element;
-}
-export interface IExtensibilityOption {
-    label: string;
-    action: (entity: any) => void;
-}
-export interface IExtensibilityGroup {
-    predicate: (entity: any) => boolean;
-    entries: IExtensibilityOption[];
-}
-export interface IInspectorOptions {
-    overlay?: boolean;
-    sceneExplorerRoot?: HTMLElement;
-    actionTabsRoot?: HTMLElement;
-    embedHostRoot?: HTMLElement;
-    showExplorer?: boolean;
-    showInspector?: boolean;
-    explorerWidth?: string;
-    inspectorWidth?: string;
-    embedHostWidth?: string;
-    embedMode?: boolean;
-    handleResize?: boolean;
-    enablePopup?: boolean;
-    explorerExtensibility?: IExtensibilityGroup[];
-}
-export declare class Inspector {
-    static OnSelectionChangeObservable: BABYLON.Observable<string>;
-    static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
-    static Show(scene: BABYLON.Scene, userOptions: Partial<IInspectorOptions>): void;
-    static Hide(): void;
-}
-export declare class PropertyChangedEvent {
-    object: any;
-    property: string;
-    value: any;
-    initialValue: any;
-}
-/*BabylonJS Inspector*/
-// Dependencies for this module:
-//   ../../../../Tools/gulp/react
-//   ../../../../Tools/gulp/babylonjs
-interface IActionTabsComponentProps {
-    onSelectionChangeObservable: BABYLON.Observable<any>;
-    scene: BABYLON.Scene;
-    onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
-    noCommands?: boolean;
-    noHeader?: boolean;
-    noExpand?: boolean;
-    popupMode?: boolean;
-    onPopup?: () => void;
-    onClose?: () => void;
-}
-export declare class ActionTabsComponent extends React.Component<IActionTabsComponentProps, {
-    selectedEntity: any;
-    selectedIndex: number;
-}> {
-    constructor(props: IActionTabsComponentProps);
-    componentWillMount(): void;
-    componentWillUnmount(): void;
-    renderContent(): JSX.Element;
-    onClose(): void;
-    onPopup(): void;
-    render(): JSX.Element;
-}
-interface ISceneExplorerFilterComponentProps {
-    onFilter: (filter: string) => void;
-}
-export declare class SceneExplorerFilterComponent extends React.Component<ISceneExplorerFilterComponentProps> {
-    constructor(props: ISceneExplorerFilterComponentProps);
-    render(): JSX.Element;
-}
-interface ISceneExplorerComponentProps {
-    scene: BABYLON.Scene;
-    noCommands?: boolean;
-    noHeader?: boolean;
-    noExpand?: boolean;
-    extensibilityGroups?: IExtensibilityGroup[];
-    onSelectionChangeObservable: BABYLON.Observable<any>;
-    popupMode?: boolean;
-    onPopup?: () => void;
-    onClose?: () => void;
-}
-export declare class SceneExplorerComponent extends React.Component<ISceneExplorerComponentProps, {
-    filter: BABYLON.Nullable<string>;
-    selectedEntity: any;
-    scene: BABYLON.Scene;
-}> {
-    constructor(props: ISceneExplorerComponentProps);
-    componentWillMount(): void;
-    componentWillUnmount(): void;
-    filterContent(filter: string): void;
-    findSiblings(items: any[], target: any, goNext: boolean, data: {
-        previousOne?: any;
-        found?: boolean;
-    }): boolean;
-    processKeys(keyEvent: React.KeyboardEvent<HTMLDivElement>): void;
-    renderContent(): JSX.Element | null;
-    onClose(): void;
-    onPopup(): void;
-    render(): JSX.Element;
-}
-export interface IExtensibilityOption {
-    label: string;
-    action: (entity: any) => void;
-}
-export interface IExtensibilityGroup {
-    predicate: (entity: any) => boolean;
-    entries: IExtensibilityOption[];
-}
-export interface IInspectorOptions {
-    overlay?: boolean;
-    sceneExplorerRoot?: HTMLElement;
-    actionTabsRoot?: HTMLElement;
-    embedHostRoot?: HTMLElement;
-    showExplorer?: boolean;
-    showInspector?: boolean;
-    explorerWidth?: string;
-    inspectorWidth?: string;
-    embedHostWidth?: string;
-    embedMode?: boolean;
-    handleResize?: boolean;
-    enablePopup?: boolean;
-    explorerExtensibility?: IExtensibilityGroup[];
-}
-export declare class Inspector {
-    static OnSelectionChangeObservable: BABYLON.Observable<string>;
-    static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
-    static Show(scene: BABYLON.Scene, userOptions: Partial<IInspectorOptions>): void;
-    static Hide(): void;
-}
-export declare class PropertyChangedEvent {
-    object: any;
-    property: string;
-    value: any;
-    initialValue: any;
-}
-/*BabylonJS Inspector*/
-// Dependencies for this module:
-//   ../../../../Tools/gulp/react
-//   ../../../../Tools/gulp/babylonjs
-interface IActionTabsComponentProps {
-    onSelectionChangeObservable: BABYLON.Observable<any>;
-    scene: BABYLON.Scene;
-    onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
-    noCommands?: boolean;
-    noHeader?: boolean;
-    noExpand?: boolean;
-    popupMode?: boolean;
-    onPopup?: () => void;
-    onClose?: () => void;
-}
-export declare class ActionTabsComponent extends React.Component<IActionTabsComponentProps, {
-    selectedEntity: any;
-    selectedIndex: number;
-}> {
-    constructor(props: IActionTabsComponentProps);
-    componentWillMount(): void;
-    componentWillUnmount(): void;
-    renderContent(): JSX.Element;
-    onClose(): void;
-    onPopup(): void;
-    render(): JSX.Element;
-}
-interface ISceneExplorerFilterComponentProps {
-    onFilter: (filter: string) => void;
-}
-export declare class SceneExplorerFilterComponent extends React.Component<ISceneExplorerFilterComponentProps> {
-    constructor(props: ISceneExplorerFilterComponentProps);
-    render(): JSX.Element;
-}
-interface ISceneExplorerComponentProps {
-    scene: BABYLON.Scene;
-    noCommands?: boolean;
-    noHeader?: boolean;
-    noExpand?: boolean;
-    extensibilityGroups?: IExtensibilityGroup[];
-    onSelectionChangeObservable: BABYLON.Observable<any>;
-    popupMode?: boolean;
-    onPopup?: () => void;
-    onClose?: () => void;
-}
-export declare class SceneExplorerComponent extends React.Component<ISceneExplorerComponentProps, {
-    filter: BABYLON.Nullable<string>;
-    selectedEntity: any;
-    scene: BABYLON.Scene;
-}> {
-    constructor(props: ISceneExplorerComponentProps);
-    componentWillMount(): void;
-    componentWillUnmount(): void;
-    filterContent(filter: string): void;
-    findSiblings(items: any[], target: any, goNext: boolean, data: {
-        previousOne?: any;
-        found?: boolean;
-    }): boolean;
-    processKeys(keyEvent: React.KeyboardEvent<HTMLDivElement>): void;
-    renderContent(): JSX.Element | null;
-    onClose(): void;
-    onPopup(): void;
-    render(): JSX.Element;
-}
-export interface IExtensibilityOption {
-    label: string;
-    action: (entity: any) => void;
-}
-export interface IExtensibilityGroup {
-    predicate: (entity: any) => boolean;
-    entries: IExtensibilityOption[];
-}
-export interface IInspectorOptions {
-    overlay?: boolean;
-    sceneExplorerRoot?: HTMLElement;
-    actionTabsRoot?: HTMLElement;
-    embedHostRoot?: HTMLElement;
-    showExplorer?: boolean;
-    showInspector?: boolean;
-    explorerWidth?: string;
-    inspectorWidth?: string;
-    embedHostWidth?: string;
-    embedMode?: boolean;
-    handleResize?: boolean;
-    enablePopup?: boolean;
-    explorerExtensibility?: IExtensibilityGroup[];
-}
-export declare class Inspector {
-    static OnSelectionChangeObservable: BABYLON.Observable<string>;
-    static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
-    static Show(scene: BABYLON.Scene, userOptions: Partial<IInspectorOptions>): void;
-    static Hide(): void;
-}
-export declare class PropertyChangedEvent {
-    object: any;
-    property: string;
-    value: any;
+//   ../../../../Tools/Gulp/babylonjs
+declare module INSPECTOR {
+}
+declare module INSPECTOR {
+    export interface IExtensibilityOption {
+        label: string;
+        action: (entity: any) => void;
+    }
+    export interface IExtensibilityGroup {
+        predicate: (entity: any) => boolean;
+        entries: IExtensibilityOption[];
+    }
+    export interface IInspectorOptions {
+        overlay?: boolean;
+        sceneExplorerRoot?: HTMLElement;
+        actionTabsRoot?: HTMLElement;
+        embedHostRoot?: HTMLElement;
+        showExplorer?: boolean;
+        showInspector?: boolean;
+        explorerWidth?: string;
+        inspectorWidth?: string;
+        embedHostWidth?: string;
+        embedMode?: boolean;
+        handleResize?: boolean;
+        enablePopup?: boolean;
+        explorerExtensibility?: IExtensibilityGroup[];
+    }
+    export class Inspector {
+        static OnSelectionChangeObservable: BABYLON.Observable<string>;
+        static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
+        static readonly IsVisible: boolean;
+        static Show(scene: BABYLON.Scene, userOptions: Partial<IInspectorOptions>): void;
+        static Hide(): void;
+    }
+}
+declare module INSPECTOR {
+    export class PropertyChangedEvent {
+        object: any;
+        property: string;
+        value: any;
+        initialValue: any;
+    }
+}

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

@@ -1,809 +1,98 @@
-/*BabylonJS Inspector*/
+/*Babylon.js Inspector*/
 // Dependencies for this module:
-//   ../../../../Tools/gulp/react
-//   ../../../../Tools/gulp/babylonjs
+//   ../../../../Tools/Gulp/babylonjs
 
-export * from "babylonjs-inspector/--/--/--/--/inspector/build/components/actionTabs/actionTabsComponent";
-export * from "babylonjs-inspector/--/--/--/--/inspector/build/components/sceneExplorer/sceneExplorerComponent";
-export * from "babylonjs-inspector/--/--/--/--/inspector/build/inspector";
-
-import * as React from "react";
-import { Observable, Scene } from "babylonjs";
-import { PropertyChangedEvent } from "babylonjs-inspector/--/--/--/--/inspector/build/components/propertyChangedEvent";
-interface IActionTabsComponentProps {
-    onSelectionChangeObservable: Observable<any>;
-    scene: Scene;
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    noCommands?: boolean;
-    noHeader?: boolean;
-    noExpand?: boolean;
-    popupMode?: boolean;
-    onPopup?: () => void;
-    onClose?: () => void;
-}
-export declare class ActionTabsComponent extends React.Component<IActionTabsComponentProps, {
-    selectedEntity: any;
-    selectedIndex: number;
-}> {
-    constructor(props: IActionTabsComponentProps);
-    componentWillMount(): void;
-    componentWillUnmount(): void;
-    renderContent(): JSX.Element;
-    onClose(): void;
-    onPopup(): void;
-    render(): JSX.Element;
-}
-export {};
-
-import * as React from "react";
-import { Scene, Observable, Nullable } from "babylonjs";
-import { IExtensibilityGroup } from "babylonjs-inspector/--/--/--/--/inspector/build/inspector";
-interface ISceneExplorerFilterComponentProps {
-    onFilter: (filter: string) => void;
-}
-export declare class SceneExplorerFilterComponent extends React.Component<ISceneExplorerFilterComponentProps> {
-    constructor(props: ISceneExplorerFilterComponentProps);
-    render(): JSX.Element;
-}
-interface ISceneExplorerComponentProps {
-    scene: Scene;
-    noCommands?: boolean;
-    noHeader?: boolean;
-    noExpand?: boolean;
-    extensibilityGroups?: IExtensibilityGroup[];
-    onSelectionChangeObservable: Observable<any>;
-    popupMode?: boolean;
-    onPopup?: () => void;
-    onClose?: () => void;
+declare module 'babylonjs-inspector' {
+    export * from "babylonjs-inspector/inspector";
 }
-export declare class SceneExplorerComponent extends React.Component<ISceneExplorerComponentProps, {
-    filter: Nullable<string>;
-    selectedEntity: any;
-    scene: Scene;
-}> {
-    constructor(props: ISceneExplorerComponentProps);
-    componentWillMount(): void;
-    componentWillUnmount(): void;
-    filterContent(filter: string): void;
-    findSiblings(items: any[], target: any, goNext: boolean, data: {
-        previousOne?: any;
-        found?: boolean;
-    }): boolean;
-    processKeys(keyEvent: React.KeyboardEvent<HTMLDivElement>): void;
-    renderContent(): JSX.Element | null;
-    onClose(): void;
-    onPopup(): void;
-    render(): JSX.Element;
-}
-export {};
 
-import { Scene, Observable } from "babylonjs";
-import { PropertyChangedEvent } from "babylonjs-inspector/--/--/--/--/inspector/build/components/propertyChangedEvent";
-export interface IExtensibilityOption {
-    label: string;
-    action: (entity: any) => void;
-}
-export interface IExtensibilityGroup {
-    predicate: (entity: any) => boolean;
-    entries: IExtensibilityOption[];
-}
-export interface IInspectorOptions {
-    overlay?: boolean;
-    sceneExplorerRoot?: HTMLElement;
-    actionTabsRoot?: HTMLElement;
-    embedHostRoot?: HTMLElement;
-    showExplorer?: boolean;
-    showInspector?: boolean;
-    explorerWidth?: string;
-    inspectorWidth?: string;
-    embedHostWidth?: string;
-    embedMode?: boolean;
-    handleResize?: boolean;
-    enablePopup?: boolean;
-    explorerExtensibility?: IExtensibilityGroup[];
-}
-export declare class Inspector {
-    static OnSelectionChangeObservable: Observable<string>;
-    static OnPropertyChangedObservable: Observable<PropertyChangedEvent>;
-    static Show(scene: Scene, userOptions: Partial<IInspectorOptions>): void;
-    static Hide(): void;
+declare module 'babylonjs-inspector/inspector' {
+    import { Scene, Observable } from "babylonjs";
+    import { PropertyChangedEvent } from "babylonjs-inspector/components/propertyChangedEvent";
+    export interface IExtensibilityOption {
+        label: string;
+        action: (entity: any) => void;
+    }
+    export interface IExtensibilityGroup {
+        predicate: (entity: any) => boolean;
+        entries: IExtensibilityOption[];
+    }
+    export interface IInspectorOptions {
+        overlay?: boolean;
+        sceneExplorerRoot?: HTMLElement;
+        actionTabsRoot?: HTMLElement;
+        embedHostRoot?: HTMLElement;
+        showExplorer?: boolean;
+        showInspector?: boolean;
+        explorerWidth?: string;
+        inspectorWidth?: string;
+        embedHostWidth?: string;
+        embedMode?: boolean;
+        handleResize?: boolean;
+        enablePopup?: boolean;
+        explorerExtensibility?: IExtensibilityGroup[];
+    }
+    export class Inspector {
+        static OnSelectionChangeObservable: Observable<string>;
+        static OnPropertyChangedObservable: Observable<PropertyChangedEvent>;
+        static readonly IsVisible: boolean;
+        static Show(scene: Scene, userOptions: Partial<IInspectorOptions>): void;
+        static Hide(): void;
+    }
 }
 
-export declare class PropertyChangedEvent {
-    object: any;
-    property: string;
-    value: any;
-    initialValue: any;
+declare module 'babylonjs-inspector/components/propertyChangedEvent' {
+    export class PropertyChangedEvent {
+        object: any;
+        property: string;
+        value: any;
+        initialValue: any;
+    }
 }
 
 
-/*BabylonJS Inspector*/
-// Dependencies for this module:
-//   ../../../../Tools/gulp/react
-//   ../../../../Tools/gulp/babylonjs
-interface IActionTabsComponentProps {
-    onSelectionChangeObservable: BABYLON.Observable<any>;
-    scene: BABYLON.Scene;
-    onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
-    noCommands?: boolean;
-    noHeader?: boolean;
-    noExpand?: boolean;
-    popupMode?: boolean;
-    onPopup?: () => void;
-    onClose?: () => void;
-}
-export declare class ActionTabsComponent extends React.Component<IActionTabsComponentProps, {
-    selectedEntity: any;
-    selectedIndex: number;
-}> {
-    constructor(props: IActionTabsComponentProps);
-    componentWillMount(): void;
-    componentWillUnmount(): void;
-    renderContent(): JSX.Element;
-    onClose(): void;
-    onPopup(): void;
-    render(): JSX.Element;
-}
-interface ISceneExplorerFilterComponentProps {
-    onFilter: (filter: string) => void;
-}
-export declare class SceneExplorerFilterComponent extends React.Component<ISceneExplorerFilterComponentProps> {
-    constructor(props: ISceneExplorerFilterComponentProps);
-    render(): JSX.Element;
-}
-interface ISceneExplorerComponentProps {
-    scene: BABYLON.Scene;
-    noCommands?: boolean;
-    noHeader?: boolean;
-    noExpand?: boolean;
-    extensibilityGroups?: IExtensibilityGroup[];
-    onSelectionChangeObservable: BABYLON.Observable<any>;
-    popupMode?: boolean;
-    onPopup?: () => void;
-    onClose?: () => void;
-}
-export declare class SceneExplorerComponent extends React.Component<ISceneExplorerComponentProps, {
-    filter: BABYLON.Nullable<string>;
-    selectedEntity: any;
-    scene: BABYLON.Scene;
-}> {
-    constructor(props: ISceneExplorerComponentProps);
-    componentWillMount(): void;
-    componentWillUnmount(): void;
-    filterContent(filter: string): void;
-    findSiblings(items: any[], target: any, goNext: boolean, data: {
-        previousOne?: any;
-        found?: boolean;
-    }): boolean;
-    processKeys(keyEvent: React.KeyboardEvent<HTMLDivElement>): void;
-    renderContent(): JSX.Element | null;
-    onClose(): void;
-    onPopup(): void;
-    render(): JSX.Element;
-}
-export interface IExtensibilityOption {
-    label: string;
-    action: (entity: any) => void;
-}
-export interface IExtensibilityGroup {
-    predicate: (entity: any) => boolean;
-    entries: IExtensibilityOption[];
-}
-export interface IInspectorOptions {
-    overlay?: boolean;
-    sceneExplorerRoot?: HTMLElement;
-    actionTabsRoot?: HTMLElement;
-    embedHostRoot?: HTMLElement;
-    showExplorer?: boolean;
-    showInspector?: boolean;
-    explorerWidth?: string;
-    inspectorWidth?: string;
-    embedHostWidth?: string;
-    embedMode?: boolean;
-    handleResize?: boolean;
-    enablePopup?: boolean;
-    explorerExtensibility?: IExtensibilityGroup[];
-}
-export declare class Inspector {
-    static OnSelectionChangeObservable: BABYLON.Observable<string>;
-    static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
-    static Show(scene: BABYLON.Scene, userOptions: Partial<IInspectorOptions>): void;
-    static Hide(): void;
-}
-export declare class PropertyChangedEvent {
-    object: any;
-    property: string;
-    value: any;
-    initialValue: any;
-}
-/*BabylonJS Inspector*/
-// Dependencies for this module:
-//   ../../../../Tools/gulp/react
-//   ../../../../Tools/gulp/babylonjs
-interface IActionTabsComponentProps {
-    onSelectionChangeObservable: BABYLON.Observable<any>;
-    scene: BABYLON.Scene;
-    onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
-    noCommands?: boolean;
-    noHeader?: boolean;
-    noExpand?: boolean;
-    popupMode?: boolean;
-    onPopup?: () => void;
-    onClose?: () => void;
-}
-export declare class ActionTabsComponent extends React.Component<IActionTabsComponentProps, {
-    selectedEntity: any;
-    selectedIndex: number;
-}> {
-    constructor(props: IActionTabsComponentProps);
-    componentWillMount(): void;
-    componentWillUnmount(): void;
-    renderContent(): JSX.Element;
-    onClose(): void;
-    onPopup(): void;
-    render(): JSX.Element;
-}
-interface ISceneExplorerFilterComponentProps {
-    onFilter: (filter: string) => void;
-}
-export declare class SceneExplorerFilterComponent extends React.Component<ISceneExplorerFilterComponentProps> {
-    constructor(props: ISceneExplorerFilterComponentProps);
-    render(): JSX.Element;
-}
-interface ISceneExplorerComponentProps {
-    scene: BABYLON.Scene;
-    noCommands?: boolean;
-    noHeader?: boolean;
-    noExpand?: boolean;
-    extensibilityGroups?: IExtensibilityGroup[];
-    onSelectionChangeObservable: BABYLON.Observable<any>;
-    popupMode?: boolean;
-    onPopup?: () => void;
-    onClose?: () => void;
-}
-export declare class SceneExplorerComponent extends React.Component<ISceneExplorerComponentProps, {
-    filter: BABYLON.Nullable<string>;
-    selectedEntity: any;
-    scene: BABYLON.Scene;
-}> {
-    constructor(props: ISceneExplorerComponentProps);
-    componentWillMount(): void;
-    componentWillUnmount(): void;
-    filterContent(filter: string): void;
-    findSiblings(items: any[], target: any, goNext: boolean, data: {
-        previousOne?: any;
-        found?: boolean;
-    }): boolean;
-    processKeys(keyEvent: React.KeyboardEvent<HTMLDivElement>): void;
-    renderContent(): JSX.Element | null;
-    onClose(): void;
-    onPopup(): void;
-    render(): JSX.Element;
-}
-export interface IExtensibilityOption {
-    label: string;
-    action: (entity: any) => void;
-}
-export interface IExtensibilityGroup {
-    predicate: (entity: any) => boolean;
-    entries: IExtensibilityOption[];
-}
-export interface IInspectorOptions {
-    overlay?: boolean;
-    sceneExplorerRoot?: HTMLElement;
-    actionTabsRoot?: HTMLElement;
-    embedHostRoot?: HTMLElement;
-    showExplorer?: boolean;
-    showInspector?: boolean;
-    explorerWidth?: string;
-    inspectorWidth?: string;
-    embedHostWidth?: string;
-    embedMode?: boolean;
-    handleResize?: boolean;
-    enablePopup?: boolean;
-    explorerExtensibility?: IExtensibilityGroup[];
-}
-export declare class Inspector {
-    static OnSelectionChangeObservable: BABYLON.Observable<string>;
-    static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
-    static Show(scene: BABYLON.Scene, userOptions: Partial<IInspectorOptions>): void;
-    static Hide(): void;
-}
-export declare class PropertyChangedEvent {
-    object: any;
-    property: string;
-    value: any;
-    initialValue: any;
-}
-/*BabylonJS Inspector*/
+/*Babylon.js Inspector*/
 // Dependencies for this module:
-//   ../../../../Tools/gulp/react
-//   ../../../../Tools/gulp/babylonjs
-interface IActionTabsComponentProps {
-    onSelectionChangeObservable: BABYLON.Observable<any>;
-    scene: BABYLON.Scene;
-    onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
-    noCommands?: boolean;
-    noHeader?: boolean;
-    noExpand?: boolean;
-    popupMode?: boolean;
-    onPopup?: () => void;
-    onClose?: () => void;
-}
-export declare class ActionTabsComponent extends React.Component<IActionTabsComponentProps, {
-    selectedEntity: any;
-    selectedIndex: number;
-}> {
-    constructor(props: IActionTabsComponentProps);
-    componentWillMount(): void;
-    componentWillUnmount(): void;
-    renderContent(): JSX.Element;
-    onClose(): void;
-    onPopup(): void;
-    render(): JSX.Element;
-}
-interface ISceneExplorerFilterComponentProps {
-    onFilter: (filter: string) => void;
-}
-export declare class SceneExplorerFilterComponent extends React.Component<ISceneExplorerFilterComponentProps> {
-    constructor(props: ISceneExplorerFilterComponentProps);
-    render(): JSX.Element;
-}
-interface ISceneExplorerComponentProps {
-    scene: BABYLON.Scene;
-    noCommands?: boolean;
-    noHeader?: boolean;
-    noExpand?: boolean;
-    extensibilityGroups?: IExtensibilityGroup[];
-    onSelectionChangeObservable: BABYLON.Observable<any>;
-    popupMode?: boolean;
-    onPopup?: () => void;
-    onClose?: () => void;
-}
-export declare class SceneExplorerComponent extends React.Component<ISceneExplorerComponentProps, {
-    filter: BABYLON.Nullable<string>;
-    selectedEntity: any;
-    scene: BABYLON.Scene;
-}> {
-    constructor(props: ISceneExplorerComponentProps);
-    componentWillMount(): void;
-    componentWillUnmount(): void;
-    filterContent(filter: string): void;
-    findSiblings(items: any[], target: any, goNext: boolean, data: {
-        previousOne?: any;
-        found?: boolean;
-    }): boolean;
-    processKeys(keyEvent: React.KeyboardEvent<HTMLDivElement>): void;
-    renderContent(): JSX.Element | null;
-    onClose(): void;
-    onPopup(): void;
-    render(): JSX.Element;
-}
-export interface IExtensibilityOption {
-    label: string;
-    action: (entity: any) => void;
-}
-export interface IExtensibilityGroup {
-    predicate: (entity: any) => boolean;
-    entries: IExtensibilityOption[];
-}
-export interface IInspectorOptions {
-    overlay?: boolean;
-    sceneExplorerRoot?: HTMLElement;
-    actionTabsRoot?: HTMLElement;
-    embedHostRoot?: HTMLElement;
-    showExplorer?: boolean;
-    showInspector?: boolean;
-    explorerWidth?: string;
-    inspectorWidth?: string;
-    embedHostWidth?: string;
-    embedMode?: boolean;
-    handleResize?: boolean;
-    enablePopup?: boolean;
-    explorerExtensibility?: IExtensibilityGroup[];
-}
-export declare class Inspector {
-    static OnSelectionChangeObservable: BABYLON.Observable<string>;
-    static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
-    static Show(scene: BABYLON.Scene, userOptions: Partial<IInspectorOptions>): void;
-    static Hide(): void;
-}
-export declare class PropertyChangedEvent {
-    object: any;
-    property: string;
-    value: any;
-    initialValue: any;
-/*BabylonJS Inspector*/
-// Dependencies for this module:
-//   ../../../../Tools/gulp/react
-//   ../../../../Tools/gulp/babylonjs
-interface IActionTabsComponentProps {
-    onSelectionChangeObservable: BABYLON.Observable<any>;
-    scene: BABYLON.Scene;
-    onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
-    noCommands?: boolean;
-    noHeader?: boolean;
-    noExpand?: boolean;
-    popupMode?: boolean;
-    onPopup?: () => void;
-    onClose?: () => void;
-}
-export declare class ActionTabsComponent extends React.Component<IActionTabsComponentProps, {
-    selectedEntity: any;
-    selectedIndex: number;
-}> {
-    constructor(props: IActionTabsComponentProps);
-    componentWillMount(): void;
-    componentWillUnmount(): void;
-    renderContent(): JSX.Element;
-    onClose(): void;
-    onPopup(): void;
-    render(): JSX.Element;
-}
-interface ISceneExplorerFilterComponentProps {
-    onFilter: (filter: string) => void;
-}
-export declare class SceneExplorerFilterComponent extends React.Component<ISceneExplorerFilterComponentProps> {
-    constructor(props: ISceneExplorerFilterComponentProps);
-    render(): JSX.Element;
-}
-interface ISceneExplorerComponentProps {
-    scene: BABYLON.Scene;
-    noCommands?: boolean;
-    noHeader?: boolean;
-    noExpand?: boolean;
-    extensibilityGroups?: IExtensibilityGroup[];
-    onSelectionChangeObservable: BABYLON.Observable<any>;
-    popupMode?: boolean;
-    onPopup?: () => void;
-    onClose?: () => void;
-}
-export declare class SceneExplorerComponent extends React.Component<ISceneExplorerComponentProps, {
-    filter: BABYLON.Nullable<string>;
-    selectedEntity: any;
-    scene: BABYLON.Scene;
-}> {
-    constructor(props: ISceneExplorerComponentProps);
-    componentWillMount(): void;
-    componentWillUnmount(): void;
-    filterContent(filter: string): void;
-    findSiblings(items: any[], target: any, goNext: boolean, data: {
-        previousOne?: any;
-        found?: boolean;
-    }): boolean;
-    processKeys(keyEvent: React.KeyboardEvent<HTMLDivElement>): void;
-    renderContent(): JSX.Element | null;
-    onClose(): void;
-    onPopup(): void;
-    render(): JSX.Element;
-}
-export interface IExtensibilityOption {
-    label: string;
-    action: (entity: any) => void;
-}
-export interface IExtensibilityGroup {
-    predicate: (entity: any) => boolean;
-    entries: IExtensibilityOption[];
-}
-export interface IInspectorOptions {
-    overlay?: boolean;
-    sceneExplorerRoot?: HTMLElement;
-    actionTabsRoot?: HTMLElement;
-    embedHostRoot?: HTMLElement;
-    showExplorer?: boolean;
-    showInspector?: boolean;
-    explorerWidth?: string;
-    inspectorWidth?: string;
-    embedHostWidth?: string;
-    embedMode?: boolean;
-    handleResize?: boolean;
-    enablePopup?: boolean;
-    explorerExtensibility?: IExtensibilityGroup[];
-}
-export declare class Inspector {
-    static OnSelectionChangeObservable: BABYLON.Observable<string>;
-    static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
-    static Show(scene: BABYLON.Scene, userOptions: Partial<IInspectorOptions>): void;
-    static Hide(): void;
-}
-export declare class PropertyChangedEvent {
-    object: any;
-    property: string;
-    value: any;
-    initialValue: any;
-}
-/*BabylonJS Inspector*/
-// Dependencies for this module:
-//   ../../../../Tools/gulp/react
-//   ../../../../Tools/gulp/babylonjs
-interface IActionTabsComponentProps {
-    onSelectionChangeObservable: BABYLON.Observable<any>;
-    scene: BABYLON.Scene;
-    onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
-    noCommands?: boolean;
-    noHeader?: boolean;
-    noExpand?: boolean;
-    popupMode?: boolean;
-    onPopup?: () => void;
-    onClose?: () => void;
-}
-export declare class ActionTabsComponent extends React.Component<IActionTabsComponentProps, {
-    selectedEntity: any;
-    selectedIndex: number;
-}> {
-    constructor(props: IActionTabsComponentProps);
-    componentWillMount(): void;
-    componentWillUnmount(): void;
-    renderContent(): JSX.Element;
-    onClose(): void;
-    onPopup(): void;
-    render(): JSX.Element;
-}
-interface ISceneExplorerFilterComponentProps {
-    onFilter: (filter: string) => void;
-}
-export declare class SceneExplorerFilterComponent extends React.Component<ISceneExplorerFilterComponentProps> {
-    constructor(props: ISceneExplorerFilterComponentProps);
-    render(): JSX.Element;
-}
-interface ISceneExplorerComponentProps {
-    scene: BABYLON.Scene;
-    noCommands?: boolean;
-    noHeader?: boolean;
-    noExpand?: boolean;
-    extensibilityGroups?: IExtensibilityGroup[];
-    onSelectionChangeObservable: BABYLON.Observable<any>;
-    popupMode?: boolean;
-    onPopup?: () => void;
-    onClose?: () => void;
-}
-export declare class SceneExplorerComponent extends React.Component<ISceneExplorerComponentProps, {
-    filter: BABYLON.Nullable<string>;
-    selectedEntity: any;
-    scene: BABYLON.Scene;
-}> {
-    constructor(props: ISceneExplorerComponentProps);
-    componentWillMount(): void;
-    componentWillUnmount(): void;
-    filterContent(filter: string): void;
-    findSiblings(items: any[], target: any, goNext: boolean, data: {
-        previousOne?: any;
-        found?: boolean;
-    }): boolean;
-    processKeys(keyEvent: React.KeyboardEvent<HTMLDivElement>): void;
-    renderContent(): JSX.Element | null;
-    onClose(): void;
-    onPopup(): void;
-    render(): JSX.Element;
-}
-export interface IExtensibilityOption {
-    label: string;
-    action: (entity: any) => void;
-}
-export interface IExtensibilityGroup {
-    predicate: (entity: any) => boolean;
-    entries: IExtensibilityOption[];
-}
-export interface IInspectorOptions {
-    overlay?: boolean;
-    sceneExplorerRoot?: HTMLElement;
-    actionTabsRoot?: HTMLElement;
-    embedHostRoot?: HTMLElement;
-    showExplorer?: boolean;
-    showInspector?: boolean;
-    explorerWidth?: string;
-    inspectorWidth?: string;
-    embedHostWidth?: string;
-    embedMode?: boolean;
-    handleResize?: boolean;
-    enablePopup?: boolean;
-    explorerExtensibility?: IExtensibilityGroup[];
-}
-export declare class Inspector {
-    static OnSelectionChangeObservable: BABYLON.Observable<string>;
-    static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
-    static Show(scene: BABYLON.Scene, userOptions: Partial<IInspectorOptions>): void;
-    static Hide(): void;
-}
-export declare class PropertyChangedEvent {
-    object: any;
-    property: string;
-    value: any;
-    initialValue: any;
-}
-/*BabylonJS Inspector*/
-// Dependencies for this module:
-//   ../../../../Tools/gulp/react
-//   ../../../../Tools/gulp/babylonjs
-interface IActionTabsComponentProps {
-    onSelectionChangeObservable: BABYLON.Observable<any>;
-    scene: BABYLON.Scene;
-    onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
-    noCommands?: boolean;
-    noHeader?: boolean;
-    noExpand?: boolean;
-    popupMode?: boolean;
-    onPopup?: () => void;
-    onClose?: () => void;
-}
-export declare class ActionTabsComponent extends React.Component<IActionTabsComponentProps, {
-    selectedEntity: any;
-    selectedIndex: number;
-}> {
-    constructor(props: IActionTabsComponentProps);
-    componentWillMount(): void;
-    componentWillUnmount(): void;
-    renderContent(): JSX.Element;
-    onClose(): void;
-    onPopup(): void;
-    render(): JSX.Element;
-}
-interface ISceneExplorerFilterComponentProps {
-    onFilter: (filter: string) => void;
-}
-export declare class SceneExplorerFilterComponent extends React.Component<ISceneExplorerFilterComponentProps> {
-    constructor(props: ISceneExplorerFilterComponentProps);
-    render(): JSX.Element;
-}
-interface ISceneExplorerComponentProps {
-    scene: BABYLON.Scene;
-    noCommands?: boolean;
-    noHeader?: boolean;
-    noExpand?: boolean;
-    extensibilityGroups?: IExtensibilityGroup[];
-    onSelectionChangeObservable: BABYLON.Observable<any>;
-    popupMode?: boolean;
-    onPopup?: () => void;
-    onClose?: () => void;
-}
-export declare class SceneExplorerComponent extends React.Component<ISceneExplorerComponentProps, {
-    filter: BABYLON.Nullable<string>;
-    selectedEntity: any;
-    scene: BABYLON.Scene;
-}> {
-    constructor(props: ISceneExplorerComponentProps);
-    componentWillMount(): void;
-    componentWillUnmount(): void;
-    filterContent(filter: string): void;
-    findSiblings(items: any[], target: any, goNext: boolean, data: {
-        previousOne?: any;
-        found?: boolean;
-    }): boolean;
-    processKeys(keyEvent: React.KeyboardEvent<HTMLDivElement>): void;
-    renderContent(): JSX.Element | null;
-    onClose(): void;
-    onPopup(): void;
-    render(): JSX.Element;
-}
-export interface IExtensibilityOption {
-    label: string;
-    action: (entity: any) => void;
-}
-export interface IExtensibilityGroup {
-    predicate: (entity: any) => boolean;
-    entries: IExtensibilityOption[];
-}
-export interface IInspectorOptions {
-    overlay?: boolean;
-    sceneExplorerRoot?: HTMLElement;
-    actionTabsRoot?: HTMLElement;
-    embedHostRoot?: HTMLElement;
-    showExplorer?: boolean;
-    showInspector?: boolean;
-    explorerWidth?: string;
-    inspectorWidth?: string;
-    embedHostWidth?: string;
-    embedMode?: boolean;
-    handleResize?: boolean;
-    enablePopup?: boolean;
-    explorerExtensibility?: IExtensibilityGroup[];
-}
-export declare class Inspector {
-    static OnSelectionChangeObservable: BABYLON.Observable<string>;
-    static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
-    static Show(scene: BABYLON.Scene, userOptions: Partial<IInspectorOptions>): void;
-    static Hide(): void;
-}
-export declare class PropertyChangedEvent {
-    object: any;
-    property: string;
-    value: any;
-    initialValue: any;
-}
-/*BabylonJS Inspector*/
-// Dependencies for this module:
-//   ../../../../Tools/gulp/react
-//   ../../../../Tools/gulp/babylonjs
-interface IActionTabsComponentProps {
-    onSelectionChangeObservable: BABYLON.Observable<any>;
-    scene: BABYLON.Scene;
-    onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
-    noCommands?: boolean;
-    noHeader?: boolean;
-    noExpand?: boolean;
-    popupMode?: boolean;
-    onPopup?: () => void;
-    onClose?: () => void;
-}
-export declare class ActionTabsComponent extends React.Component<IActionTabsComponentProps, {
-    selectedEntity: any;
-    selectedIndex: number;
-}> {
-    constructor(props: IActionTabsComponentProps);
-    componentWillMount(): void;
-    componentWillUnmount(): void;
-    renderContent(): JSX.Element;
-    onClose(): void;
-    onPopup(): void;
-    render(): JSX.Element;
-}
-interface ISceneExplorerFilterComponentProps {
-    onFilter: (filter: string) => void;
-}
-export declare class SceneExplorerFilterComponent extends React.Component<ISceneExplorerFilterComponentProps> {
-    constructor(props: ISceneExplorerFilterComponentProps);
-    render(): JSX.Element;
-}
-interface ISceneExplorerComponentProps {
-    scene: BABYLON.Scene;
-    noCommands?: boolean;
-    noHeader?: boolean;
-    noExpand?: boolean;
-    extensibilityGroups?: IExtensibilityGroup[];
-    onSelectionChangeObservable: BABYLON.Observable<any>;
-    popupMode?: boolean;
-    onPopup?: () => void;
-    onClose?: () => void;
-}
-export declare class SceneExplorerComponent extends React.Component<ISceneExplorerComponentProps, {
-    filter: BABYLON.Nullable<string>;
-    selectedEntity: any;
-    scene: BABYLON.Scene;
-}> {
-    constructor(props: ISceneExplorerComponentProps);
-    componentWillMount(): void;
-    componentWillUnmount(): void;
-    filterContent(filter: string): void;
-    findSiblings(items: any[], target: any, goNext: boolean, data: {
-        previousOne?: any;
-        found?: boolean;
-    }): boolean;
-    processKeys(keyEvent: React.KeyboardEvent<HTMLDivElement>): void;
-    renderContent(): JSX.Element | null;
-    onClose(): void;
-    onPopup(): void;
-    render(): JSX.Element;
-}
-export interface IExtensibilityOption {
-    label: string;
-    action: (entity: any) => void;
-}
-export interface IExtensibilityGroup {
-    predicate: (entity: any) => boolean;
-    entries: IExtensibilityOption[];
-}
-export interface IInspectorOptions {
-    overlay?: boolean;
-    sceneExplorerRoot?: HTMLElement;
-    actionTabsRoot?: HTMLElement;
-    embedHostRoot?: HTMLElement;
-    showExplorer?: boolean;
-    showInspector?: boolean;
-    explorerWidth?: string;
-    inspectorWidth?: string;
-    embedHostWidth?: string;
-    embedMode?: boolean;
-    handleResize?: boolean;
-    enablePopup?: boolean;
-    explorerExtensibility?: IExtensibilityGroup[];
-}
-export declare class Inspector {
-    static OnSelectionChangeObservable: BABYLON.Observable<string>;
-    static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
-    static Show(scene: BABYLON.Scene, userOptions: Partial<IInspectorOptions>): void;
-    static Hide(): void;
-}
-export declare class PropertyChangedEvent {
-    object: any;
-    property: string;
-    value: any;
+//   ../../../../Tools/Gulp/babylonjs
+declare module INSPECTOR {
+}
+declare module INSPECTOR {
+    export interface IExtensibilityOption {
+        label: string;
+        action: (entity: any) => void;
+    }
+    export interface IExtensibilityGroup {
+        predicate: (entity: any) => boolean;
+        entries: IExtensibilityOption[];
+    }
+    export interface IInspectorOptions {
+        overlay?: boolean;
+        sceneExplorerRoot?: HTMLElement;
+        actionTabsRoot?: HTMLElement;
+        embedHostRoot?: HTMLElement;
+        showExplorer?: boolean;
+        showInspector?: boolean;
+        explorerWidth?: string;
+        inspectorWidth?: string;
+        embedHostWidth?: string;
+        embedMode?: boolean;
+        handleResize?: boolean;
+        enablePopup?: boolean;
+        explorerExtensibility?: IExtensibilityGroup[];
+    }
+    export class Inspector {
+        static OnSelectionChangeObservable: BABYLON.Observable<string>;
+        static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
+        static readonly IsVisible: boolean;
+        static Show(scene: BABYLON.Scene, userOptions: Partial<IInspectorOptions>): void;
+        static Hide(): void;
+    }
+}
+declare module INSPECTOR {
+    export class PropertyChangedEvent {
+        object: any;
+        property: string;
+        value: any;
+        initialValue: any;
+    }
+}

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

@@ -70,57 +70,6 @@ declare module BabylonViewer {
     export let viewerGlobals: ViewerGlobals;
 }
 declare module BabylonViewer {
-    /**
-        * The viewer manager is the container for all viewers currently registered on this page.
-        * It is possible to have more than one viewer on a single page.
-        */
-    export class ViewerManager {
-            /**
-                * A callback that will be triggered when a new viewer was added
-                */
-            onViewerAdded: (viewer: AbstractViewer) => void;
-            /**
-                * Will notify when a new viewer was added
-                */
-            onViewerAddedObservable: BABYLON.Observable<AbstractViewer>;
-            /**
-                * Will notify when a viewer was removed (disposed)
-                */
-            onViewerRemovedObservable: BABYLON.Observable<string>;
-            constructor();
-            /**
-                * Adding a new viewer to the viewer manager and start tracking it.
-                * @param viewer the viewer to add
-                */
-            addViewer(viewer: AbstractViewer): void;
-            /**
-                * remove a viewer from the viewer manager
-                * @param viewer the viewer to remove
-                */
-            removeViewer(viewer: AbstractViewer): void;
-            /**
-                * Get a viewer by its baseId (if the container element has an ID, it is the this is. if not, a random id was assigned)
-                * @param id the id of the HTMl element (or the viewer's, if none provided)
-                */
-            getViewerById(id: string): AbstractViewer;
-            /**
-                * Get a viewer using a container element
-                * @param element the HTML element to search viewers associated with
-                */
-            getViewerByHTMLElement(element: HTMLElement): AbstractViewer | undefined;
-            /**
-                * Get a promise that will fullfil when this viewer was initialized.
-                * Since viewer initialization and template injection is asynchronous, using the promise will guaranty that
-                * you will get the viewer after everything was already configured.
-                * @param id the viewer id to find
-                */
-            getViewerPromiseById(id: string): Promise<AbstractViewer>;
-            /**
-                * dispose the manager and all of its associated viewers
-                */
-            dispose(): void;
-    }
-    export let viewerManager: ViewerManager;
 }
 declare module BabylonViewer {
     /**

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

@@ -94,59 +94,7 @@ declare module 'babylonjs-viewer/configuration/globals' {
 }
 
 declare module 'babylonjs-viewer/viewer/viewerManager' {
-    import { Observable } from 'babylonjs';
-    import { AbstractViewer } from 'babylonjs-viewer/viewer/viewer';
-    /**
-        * The viewer manager is the container for all viewers currently registered on this page.
-        * It is possible to have more than one viewer on a single page.
-        */
-    export class ViewerManager {
-            /**
-                * A callback that will be triggered when a new viewer was added
-                */
-            onViewerAdded: (viewer: AbstractViewer) => void;
-            /**
-                * Will notify when a new viewer was added
-                */
-            onViewerAddedObservable: Observable<AbstractViewer>;
-            /**
-                * Will notify when a viewer was removed (disposed)
-                */
-            onViewerRemovedObservable: Observable<string>;
-            constructor();
-            /**
-                * Adding a new viewer to the viewer manager and start tracking it.
-                * @param viewer the viewer to add
-                */
-            addViewer(viewer: AbstractViewer): void;
-            /**
-                * remove a viewer from the viewer manager
-                * @param viewer the viewer to remove
-                */
-            removeViewer(viewer: AbstractViewer): void;
-            /**
-                * Get a viewer by its baseId (if the container element has an ID, it is the this is. if not, a random id was assigned)
-                * @param id the id of the HTMl element (or the viewer's, if none provided)
-                */
-            getViewerById(id: string): AbstractViewer;
-            /**
-                * Get a viewer using a container element
-                * @param element the HTML element to search viewers associated with
-                */
-            getViewerByHTMLElement(element: HTMLElement): AbstractViewer | undefined;
-            /**
-                * Get a promise that will fullfil when this viewer was initialized.
-                * Since viewer initialization and template injection is asynchronous, using the promise will guaranty that
-                * you will get the viewer after everything was already configured.
-                * @param id the viewer id to find
-                */
-            getViewerPromiseById(id: string): Promise<AbstractViewer>;
-            /**
-                * dispose the manager and all of its associated viewers
-                */
-            dispose(): void;
-    }
-    export let viewerManager: ViewerManager;
+    
 }
 
 declare module 'babylonjs-viewer/viewer/defaultViewer' {

inspector/index.html

@@ -17,18 +17,19 @@
             padding: 0;
             margin: 0
         }
-        
+
         #wrapper {
             width: 100%;
             height: 100%;
             display: flex;
             overflow: hidden;
         }
-        
+
         canvas {
             width: 100%;
+            height: 100%;
         }
-        
+
         #inspector {
             width: 25%;
         }
@@ -46,7 +47,7 @@
 
     <!--Starting the game-->
     <script>
-        BABYLONDEVTOOLS.Loader.require("test/index.js").load(function () {
+        BABYLONDEVTOOLS.Loader.require("test/index.js").load(function() {
             new Test('game-canvas');
         });
     </script>

inspector/package.json

@@ -39,10 +39,9 @@
         "re-resizable": "~4.9.1",
         "react": "~16.5.2",
         "react-dom": "~16.5.2",
-        "react-splitter-layout": "~3.0.1",
         "sass-loader": "~7.1.0",
         "style-loader": "~0.23.1",
-        "ts-loader": "~5.2.2",
+        "ts-loader": "^4.0.0",
         "typescript": "~3.1.3",
         "webpack": "~4.21.0",
         "webpack-cli": "~3.1.2",
@@ -50,4 +49,4 @@
         "mini-css-extract-plugin": "~0.4.4",
         "clean-webpack-plugin": "~0.1.19"
     }
-}
+}

inspector/src/Inspector.ts

@@ -99,7 +99,7 @@ export class Inspector {
                 this._SceneExplorerHost = parentControlExplorer.ownerDocument!.createElement("div");
 
                 this._SceneExplorerHost.id = "scene-explorer-host";
-                this._SceneExplorerHost.style.width = options.explorerWidth || "300px";
+                this._SceneExplorerHost.style.width = options.explorerWidth || "auto";
 
                 parentControlExplorer.appendChild(this._SceneExplorerHost);
 
@@ -160,7 +160,7 @@ export class Inspector {
                 const host = parentControlActions.ownerDocument!.createElement("div");
 
                 host.id = "inspector-host";
-                host.style.width = options.inspectorWidth || "300px";
+                host.style.width = options.inspectorWidth || "auto";
 
                 parentControlActions.appendChild(host);
 
@@ -214,8 +214,7 @@ export class Inspector {
 
     private static _CreateEmbedHost(scene: Scene, options: IInternalInspectorOptions, parentControl: Nullable<HTMLElement>, onSelectionChangeObservable: Observable<string>) {
 
-
-        if (!options.embedHostRoot) {
+        if (!options.embedHostRoot || options.popup) {
             // Prepare the inspector host
             if (parentControl) {
                 const host = parentControl.ownerDocument!.createElement("div");
@@ -226,6 +225,15 @@ export class Inspector {
                 parentControl.appendChild(host);
 
                 this._EmbedHost = host;
+
+                if (!options.overlay) {
+                    this._EmbedHost.style.gridColumn = "2";
+                    this._EmbedHost.style.position = "relative";
+
+                    if (!options.popup) {
+                        options.embedHostRoot = this._EmbedHost;
+                    }
+                }
             }
         } else {
             this._EmbedHost = options.embedHostRoot;
@@ -301,6 +309,10 @@ export class Inspector {
         return parentControl;
     }
 
+    public static get IsVisible(): boolean {
+        return this._OpenedPane > 0;
+    }
+
     public static Show(scene: Scene, userOptions: Partial<IInspectorOptions>) {
 
         const options: IInternalInspectorOptions = {
@@ -331,7 +343,37 @@ export class Inspector {
                 this._CreateEmbedHost(scene, options, this._CreatePopup("INSPECTOR", "_EmbedHostWindow"), Inspector.OnSelectionChangeObservable);
             }
             else {
-                let parentControl = options.embedHostRoot ? options.embedHostRoot.parentElement : canvas!.parentElement;
+                let parentControl = (options.embedHostRoot ? options.embedHostRoot.parentElement : canvas!.parentElement) as HTMLElement;
+
+                if (!options.overlay && !this._NewCanvasContainer) {
+
+                    // Create a container for previous elements
+                    parentControl.style.display = "grid";
+                    parentControl.style.gridTemplateColumns = "1fr auto";
+                    parentControl.style.gridTemplateRows = "100%";
+
+                    this._NewCanvasContainer = parentControl.ownerDocument!.createElement("div");
+
+                    while (parentControl.childElementCount > 0) {
+                        var child = parentControl.childNodes[0];
+                        parentControl.removeChild(child);
+                        this._NewCanvasContainer.appendChild(child);
+                    }
+
+                    parentControl.appendChild(this._NewCanvasContainer);
+
+                    this._NewCanvasContainer.style.gridRow = "1";
+                    this._NewCanvasContainer.style.gridColumn = "1";
+                    this._NewCanvasContainer.style.width = "100%";
+                    this._NewCanvasContainer.style.height = "100%";
+
+                    if (options.handleResize && scene) {
+                        this._OnBeforeRenderObserver = scene.onBeforeRenderObservable.add(() => {
+                            scene.getEngine().resize();
+                        });
+                    }
+                }
+
                 this._CreateEmbedHost(scene, options, parentControl, Inspector.OnSelectionChangeObservable);
             }
         }

inspector/src/components/actionTabs/actionTabsComponent.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Observable, Observer, Scene, Nullable } from "babylonjs";
 import { TabsComponent } from "./tabsComponent";
-import { faFileAlt, faWrench, faBug, faChartPie } from '@fortawesome/free-solid-svg-icons';
+import { faFileAlt, faWrench, faBug, faChartBar } from '@fortawesome/free-solid-svg-icons';
 import { StatisticsTabComponent } from "./tabs/statisticsTabComponent";
 import { DebugTabComponent } from "./tabs/debugTabComponent";
 import Resizable from "re-resizable";
@@ -54,7 +54,7 @@ export class ActionTabsComponent extends React.Component<IActionTabsComponentPro
                     onSelectionChangeObservable={this.props.onSelectionChangeObservable}
                     onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 <DebugTabComponent title="Debug" icon={faBug} scene={this.props.scene} />
-                <StatisticsTabComponent title="Statistics" icon={faChartPie} scene={this.props.scene} />
+                <StatisticsTabComponent title="Statistics" icon={faChartBar} scene={this.props.scene} />
                 <ToolsTabComponent title="Tools" icon={faWrench} scene={this.props.scene} />
             </TabsComponent>
         )

inspector/src/components/actionTabs/tabs/propertyGrids/meshes/meshPropertyGridComponent.tsx

@@ -128,7 +128,10 @@ export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGrid
                 </LineContainerComponent>
                 <LineContainerComponent title="DEBUG" closed={true}>
                     <CheckBoxLineComponent label="Show bounding box" target={mesh} propertyName="showBoundingBox" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                    <CheckBoxLineComponent label="Paint normals" isSelected={() => paintNormals} onSelect={() => this.paintNormals()} />
+                    {
+                        mesh.material &&
+                        <CheckBoxLineComponent label="Paint normals" isSelected={() => paintNormals} onSelect={() => this.paintNormals()} />
+                    }
                 </LineContainerComponent>
             </div>
         );

inspector/src/components/embedHost/embedHost.scss

@@ -95,23 +95,4 @@
             height: 100%;
         }        
     }
-    
-    .splitter-layout.splitter-layout-vertical {
-        grid-row: 2;
-
-        .layout-pane {            
-            overflow: hidden;
-        }
-
-        #topPart {
-            overflow: hidden;
-            display: grid;
-            grid-auto-rows: 100%;
-        }
-
-        #bottomPart {
-            overflow: hidden;
-            height: 100%;
-        }
-    }
 }

inspector/src/components/embedHost/embedHostComponent.tsx

@@ -5,7 +5,6 @@ import { SceneExplorerComponent } from "../sceneExplorer/sceneExplorerComponent"
 import { ActionTabsComponent } from "../actionTabs/actionTabsComponent";
 import { Scene, Observable } from "babylonjs";
 
-let SplitterLayout = require('react-splitter-layout');
 require("./embedHost.scss");
 
 interface IEmbedHostComponentProps {
@@ -23,26 +22,9 @@ export class EmbedHostComponent extends React.Component<IEmbedHostComponentProps
         super(props);
     }
 
-    renderContent(splitEnabled: boolean) {
-        if (!splitEnabled) {
-            return (
-                <div id="split">
-                    <div id="topPart">
-                        <SceneExplorerComponent scene={this.props.scene}
-                            popupMode={true}
-                            onSelectionChangeObservable={this.props.onSelectionChangeObservable} noHeader={true} />
-                    </div>
-                    <div id="bottomPart" style={{ marginTop: "4px", overflow: "hidden" }}>
-                        <ActionTabsComponent scene={this.props.scene}
-                            popupMode={true}
-                            onSelectionChangeObservable={this.props.onSelectionChangeObservable} noHeader={true} />
-                    </div>
-                </div>
-            )
-        }
-
+    renderContent() {
         return (
-            <SplitterLayout vertical={true} primaryMinSize={200} secondaryMinSize={300}>
+            <div id="split">
                 <div id="topPart">
                     <SceneExplorerComponent scene={this.props.scene}
                         popupMode={true}
@@ -53,7 +35,7 @@ export class EmbedHostComponent extends React.Component<IEmbedHostComponentProps
                         popupMode={true}
                         onSelectionChangeObservable={this.props.onSelectionChangeObservable} noHeader={true} />
                 </div>
-            </SplitterLayout>
+            </div>
         )
     }
 
@@ -62,7 +44,7 @@ export class EmbedHostComponent extends React.Component<IEmbedHostComponentProps
             return (
                 <div id="embed">
                     <HeaderComponent title="INSPECTOR" handleBack={true} onClose={() => this.props.onClose()} onPopup={() => this.props.onPopup()} onSelectionChangeObservable={this.props.onSelectionChangeObservable} />
-                    {this.renderContent(false)}
+                    {this.renderContent()}
                 </div>
             );
         }
@@ -78,7 +60,7 @@ export class EmbedHostComponent extends React.Component<IEmbedHostComponentProps
         return (
             <Resizable id="embed" minWidth={300} maxWidth={600} size={{ height: "100%" }} minHeight="100%" enable={{ top: false, right: false, bottom: false, left: true, topRight: false, bottomRight: false, bottomLeft: false, topLeft: false }}>
                 <HeaderComponent title="INSPECTOR" handleBack={true} onClose={() => this.props.onClose()} onPopup={() => this.props.onPopup()} onSelectionChangeObservable={this.props.onSelectionChangeObservable} />
-                {this.renderContent(true)}
+                {this.renderContent()}
             </Resizable>
         );
     }

inspector/src/components/sceneExplorer/entities/meshTreeItemComponent.tsx

@@ -2,7 +2,7 @@ import { AbstractMesh, Mesh } from "babylonjs";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCube } from '@fortawesome/free-solid-svg-icons';
 import { faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
-import { faVectorSquare } from '@fortawesome/free-solid-svg-icons';
+import { faArrowsAlt } from '@fortawesome/free-solid-svg-icons';
 import { TreeItemLabelComponent } from "../treeItemLabelComponent";
 import { IExtensibilityGroup } from "../../../inspector";
 import { ExtensionsComponent } from "../extensionsComponent";
@@ -83,8 +83,8 @@ export class MeshTreeItemComponent extends React.Component<IMeshTreeItemComponen
         return (
             <div className="meshTools">
                 <TreeItemLabelComponent label={mesh.name} onClick={() => this.props.onClick()} icon={faCube} color="dodgerblue" />
-                <div className={this.state.isGizmoEnabled ? "gizmo selected icon" : "gizmo icon"} onClick={() => this.showGizmos()} title="Show/Hide gizmos">
-                    <FontAwesomeIcon icon={faVectorSquare} />
+                <div className={this.state.isGizmoEnabled ? "gizmo selected icon" : "gizmo icon"} onClick={() => this.showGizmos()} title="Show/Hide position gizmo">
+                    <FontAwesomeIcon icon={faArrowsAlt} />
                 </div>
                 <div className="visibility  icon" onClick={() => this.switchVisibility()} title="Show/Hide mesh">
                     {visibilityElement}

inspector/src/index.ts

@@ -1,5 +1,3 @@
 require("./index.css");
 
-export * from "./components/actionTabs/actionTabsComponent";
-export * from "./components/sceneExplorer/sceneExplorerComponent";
 export * from "./inspector";

inspector/test/index.js

@@ -14,6 +14,7 @@ var Test = (function() {
     Test.prototype._run = function() {
         var _this = this;
         this._initScene();
+        this.scene.debugLayer.show();
         this.scene.executeWhenReady(function() {
             _this.engine.runRenderLoop(function() {
                 _this.scene.render();

inspector/webpack.config.js

@@ -68,7 +68,7 @@ module.exports = {
             use: ['style-loader', 'css-loader']
         }]
     },
-    mode: "production",
+    mode: "development",
     devServer: {
         contentBase: path.join(__dirname, "dist"),
         compress: false,

src/Debug/babylon.debugLayer.ts

@@ -43,8 +43,6 @@ module BABYLON {
         public static InspectorURL = 'https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js';
 
         private _scene: Scene;
-        // The inspector instance
-        private _inspector: any;
 
         private BJSINSPECTOR = typeof INSPECTOR !== 'undefined' ? INSPECTOR : undefined;
 
@@ -73,26 +71,34 @@ module BABYLON {
         /** Creates the inspector window. */
         private _createInspector(config: {
             popup?: boolean,
-            initialTab?: number | string,
+            embedMode?: boolean,
             parentElement?: HTMLElement,
-            newColors?: {
-                backgroundColor?: string,
-                backgroundColorLighter?: string,
-                backgroundColorLighter2?: string,
-                backgroundColorLighter3?: string,
-                color?: string,
-                colorTop?: string,
-                colorBot?: string
-            }
+            overlay?: boolean;
+            handleResize?: boolean;
+            enablePopup?: boolean;
         } = {}) {
+            if (this.isVisible()) {
+                return;
+            }
+
             let popup = config.popup || false;
-            let initialTab = config.initialTab || 0;
             let parentElement = config.parentElement || null;
-            if (!this._inspector) {
-                this.BJSINSPECTOR = this.BJSINSPECTOR || typeof INSPECTOR !== 'undefined' ? INSPECTOR : undefined;
+            this.BJSINSPECTOR = this.BJSINSPECTOR || typeof INSPECTOR !== 'undefined' ? INSPECTOR : undefined;
+
+            let options: any = {
+                popup: popup,
+                embedMode: config.embedMode != null ? config.embedMode : parentElement ? true : false,
+                embedHostRoot: null,
+                overlay: config.overlay,
+                handleResize: config.handleResize,
+                enablePopup: config.enablePopup
+            };
 
-                this._inspector = new this.BJSINSPECTOR.Inspector(this._scene, popup, initialTab, parentElement, config.newColors);
-            } // else nothing to do as instance is already created
+            if (parentElement) {
+                options.embedHostRoot = parentElement;
+            }
+
+            this.BJSINSPECTOR.Inspector.Show(this._scene, options);
         }
 
         /**
@@ -100,25 +106,14 @@ module BABYLON {
          * @returns true if visible otherwise, false
          */
         public isVisible(): boolean {
-            if (!this._inspector) {
-                return false;
-            }
-            return true;
+            return this.BJSINSPECTOR.Inspector.IsVisible;
         }
 
         /**
          * Hide the inspector and close its window.
          */
         public hide() {
-            if (this._inspector) {
-                try {
-                    this._inspector.dispose();
-                } catch (e) {
-                    // If the inspector has been removed directly from the inspector tool
-                }
-                this.onPropertyChangedObservable.clear();
-                this._inspector = null;
-            }
+            this.BJSINSPECTOR.Inspector.Hide();
         }
 
         /**
@@ -145,17 +140,11 @@ module BABYLON {
         */
         public show(config: {
             popup?: boolean,
-            initialTab?: number | string,
             parentElement?: HTMLElement,
-            newColors?: {
-                backgroundColor?: string,
-                backgroundColorLighter?: string,
-                backgroundColorLighter2?: string,
-                backgroundColorLighter3?: string,
-                color?: string,
-                colorTop?: string,
-                colorBot?: string
-            }
+            overlay?: boolean;
+            handleResize?: boolean;
+            embedMode?: boolean,
+            enablePopup?: boolean;
         } = {}): void {
             if (typeof this.BJSINSPECTOR == 'undefined') {
                 // Load inspector and add it to the DOM
@@ -165,13 +154,5 @@ module BABYLON {
                 this._createInspector(config);
             }
         }
-
-        /**
-         * Gets the active tab
-         * @return the index of the active tab or -1 if the inspector is hidden
-         */
-        public getActiveTab(): number {
-            return this._inspector ? this._inspector.getActiveTabIndex() : -1;
-        }
     }
 }

tests/unit/babylon/babylon.example.tests.ts

@@ -1,7 +1,7 @@
 /**
  * Describes the test suite.
  */
-describe('Example', function () {
+describe('Example', function() {
     /**
      * Sets the timeout of all the tests to 10 seconds.
      * Note the JavaScript function syntax in the describe callback.
@@ -12,11 +12,12 @@ describe('Example', function () {
     /**
      * Loads the dependencies.
      */
-    before(function (done) {
+    before(function(done) {
         this.timeout(180000);
         (BABYLONDEVTOOLS).Loader
             .useDist()
-            .load(function () {
+            .testMode()
+            .load(function() {
                 // Force apply promise polyfill for consistent behavior between PhantomJS, IE11, and other browsers.
                 BABYLON.PromisePolyfill.Apply(true);
                 done();
@@ -29,19 +30,19 @@ describe('Example', function () {
      */
     describe('#ExponentOfTwo', () => {
         it('should be expoent of two', () => {
-            var result : boolean = BABYLON.Tools.IsExponentOfTwo(2);
-            expect(result).to.be.true; 
+            var result: boolean = BABYLON.Tools.IsExponentOfTwo(2);
+            expect(result).to.be.true;
 
             result = BABYLON.Tools.IsExponentOfTwo(4);
-            result.should.be.true; 
-            
+            result.should.be.true;
+
             result = BABYLON.Tools.IsExponentOfTwo(8);
             assert.isTrue(result);
         });
 
         it('should not be exponent of two', () => {
-            var result : boolean = BABYLON.Tools.IsExponentOfTwo(3);
-            expect(result).to.be.false; 
+            var result: boolean = BABYLON.Tools.IsExponentOfTwo(3);
+            expect(result).to.be.false;
 
             result = BABYLON.Tools.IsExponentOfTwo(6);
             result.should.be.false;

tests/unit/babylon/serializers/babylon.glTFSerializer.tests.ts

@@ -7,11 +7,12 @@ describe('Babylon glTF Serializer', () => {
     /**
      * Loads the dependencies
      */
-    before(function (done) {
+    before(function(done) {
         this.timeout(180000);
         (BABYLONDEVTOOLS).Loader
             .useDist()
-            .load(function () {
+            .testMode()
+            .load(function() {
                 // Force apply promise polyfill for consistent behavior between PhantomJS, IE11, and other browsers.
                 BABYLON.PromisePolyfill.Apply(true);
                 done();
@@ -21,7 +22,7 @@ describe('Babylon glTF Serializer', () => {
     /**
      * Create a null engine subject before each test.
      */
-    beforeEach(function () {
+    beforeEach(function() {
         subject = new BABYLON.NullEngine({
             renderHeight: 256,
             renderWidth: 256,

tests/unit/babylon/src/Animations/babylon.animationGroup.tests.ts

@@ -1,17 +1,18 @@
 /**
  * Describes the test suite.
  */
-describe('Babylon Animation Group', function () {
+describe('Babylon Animation Group', function() {
     let subject: BABYLON.Engine;
 
     /**
      * Loads the dependencies.
      */
-    before(function (done) {
+    before(function(done) {
         this.timeout(180000);
         (BABYLONDEVTOOLS).Loader
             .useDist()
-            .load(function () {
+            .testMode()
+            .load(function() {
                 // Force apply promise polyfill for consistent behavior between PhantomJS, IE11, and other browsers.
                 BABYLON.PromisePolyfill.Apply(true);
                 done();
@@ -21,7 +22,7 @@ describe('Babylon Animation Group', function () {
     /**
      * Create a new engine subject before each test.
      */
-    beforeEach(function () {
+    beforeEach(function() {
         subject = new BABYLON.NullEngine({
             renderHeight: 256,
             renderWidth: 256,

tests/unit/babylon/src/Loading/babylon.sceneLoader.tests.ts

@@ -1,7 +1,7 @@
 /**
  * Describes the test suite.
  */
-describe('Babylon Scene Loader', function () {
+describe('Babylon Scene Loader', function() {
     let subject: BABYLON.Engine;
 
     this.timeout(10000);
@@ -9,11 +9,12 @@ describe('Babylon Scene Loader', function () {
     /**
      * Loads the dependencies.
      */
-    before(function (done) {
+    before(function(done) {
         this.timeout(180000);
         (BABYLONDEVTOOLS).Loader
             .useDist()
-            .load(function () {
+            .testMode()
+            .load(function() {
                 // Force apply promise polyfill for consistent behavior between PhantomJS, IE11, and other browsers.
                 BABYLON.PromisePolyfill.Apply(true);
                 BABYLON.Engine.audioEngine = new BABYLON.AudioEngine();
@@ -24,7 +25,7 @@ describe('Babylon Scene Loader', function () {
     /**
      * Create a new engine subject before each test.
      */
-    beforeEach(function () {
+    beforeEach(function() {
         subject = new BABYLON.NullEngine({
             renderHeight: 256,
             renderWidth: 256,

tests/unit/babylon/src/Material/babylon.material.tests.ts

@@ -1,17 +1,18 @@
 /**
  * Describes the test suite.
  */
-describe('Babylon Material', function () {
+describe('Babylon Material', function() {
     let subject: BABYLON.Engine;
 
     /**
      * Loads the dependencies.
      */
-    before(function (done) {
+    before(function(done) {
         this.timeout(180000);
         (BABYLONDEVTOOLS).Loader
             .useDist()
-            .load(function () {
+            .testMode()
+            .load(function() {
                 // Force apply promise polyfill for consistent behavior between PhantomJS, IE11, and other browsers.
                 BABYLON.PromisePolyfill.Apply(true);
                 done();
@@ -21,7 +22,7 @@ describe('Babylon Material', function () {
     /**
      * Create a new engine subject before each test.
      */
-    beforeEach(function () {
+    beforeEach(function() {
         subject = new BABYLON.NullEngine({
             renderHeight: 256,
             renderWidth: 256,

tests/unit/babylon/src/Mesh/babylon.geometry.tests.ts

@@ -7,11 +7,12 @@ describe('Babylon Geometry', () => {
     /**
      * Loads the dependencies.
      */
-    before(function (done) {
+    before(function(done) {
         this.timeout(180000);
         (BABYLONDEVTOOLS).Loader
             .useDist()
-            .load(function () {
+            .testMode()
+            .load(function() {
                 // Force apply promise polyfill for consistent behavior between PhantomJS, IE11, and other browsers.
                 BABYLON.PromisePolyfill.Apply(true);
                 done();
@@ -21,7 +22,7 @@ describe('Babylon Geometry', () => {
     /**
      * Create a new engine subject before each test.
      */
-    beforeEach(function () {
+    beforeEach(function() {
         subject = new BABYLON.NullEngine({
             renderHeight: 256,
             renderWidth: 256,

tests/unit/babylon/src/Mesh/babylon.mesh.vertexData.tests.ts

@@ -5,11 +5,12 @@ describe('Babylon Mesh Vertex Data', () => {
     /**
      * Loads the dependencies.
      */
-    before(function (done) {
+    before(function(done) {
         this.timeout(180000);
         (BABYLONDEVTOOLS).Loader
             .useDist()
-            .load(function () {
+            .testMode()
+            .load(function() {
                 // Force apply promise polyfill for consistent behavior between PhantomJS, IE11, and other browsers.
                 BABYLON.PromisePolyfill.Apply(true);
                 done();

tests/unit/babylon/src/Mesh/babylon.positionAndRotation.tests.ts

@@ -7,11 +7,12 @@ describe('Babylon position and rotation', () => {
     /**
      * Loads the dependencies.
      */
-    before(function (done) {
+    before(function(done) {
         this.timeout(180000);
         (BABYLONDEVTOOLS).Loader
             .useDist()
-            .load(function () {
+            .testMode()
+            .load(function() {
                 // Force apply promise polyfill for consistent behavior between PhantomJS, IE11, and other browsers.
                 BABYLON.PromisePolyfill.Apply(true);
                 done();
@@ -21,7 +22,7 @@ describe('Babylon position and rotation', () => {
     /**
      * Create a new engine subject before each test.
      */
-    beforeEach(function () {
+    beforeEach(function() {
         subject = new BABYLON.NullEngine({
             renderHeight: 256,
             renderWidth: 256,
@@ -34,39 +35,39 @@ describe('Babylon position and rotation', () => {
     describe('#position and rotation:', () => {
         it('converts between quaternions/euler', () => {
             // Converting between quaternions/euler
-            var originalRotation = new BABYLON.Vector3(0.1,0.2,0.3);
+            var originalRotation = new BABYLON.Vector3(0.1, 0.2, 0.3);
             var v = originalRotation.clone()
             var q = BABYLON.Quaternion.FromEulerVector(v)
             q.toEulerAnglesToRef(v)
             expect(v.subtract(originalRotation).length() < 0.00001).to.equal(true)
         });
         it('reorders vector in place', () => {
-            var originalRotation = new BABYLON.Vector3(0.1,0.2,0.3);
+            var originalRotation = new BABYLON.Vector3(0.1, 0.2, 0.3);
             var v = originalRotation.clone()
             v.reorderInPlace("ZYX")
-            expect(v.subtract(new BABYLON.Vector3(0.3,0.2,0.1)).length() < 0.00001).to.equal(true)
+            expect(v.subtract(new BABYLON.Vector3(0.3, 0.2, 0.1)).length() < 0.00001).to.equal(true)
         });
         it('handles parenting', () => {
             // Parent child positions
             const scene = new BABYLON.Scene(subject);
             var child = new BABYLON.AbstractMesh("", scene)
             var parent = new BABYLON.AbstractMesh("", scene)
-            parent.position.set(0,0,1)
-            child.position.set(0,0,-1)
+            parent.position.set(0, 0, 1)
+            child.position.set(0, 0, -1)
             child.parent = parent
             child.computeWorldMatrix()
-            expect(child.absolutePosition.equals(new BABYLON.Vector3(0,0,0))).to.equal(true)
+            expect(child.absolutePosition.equals(new BABYLON.Vector3(0, 0, 0))).to.equal(true)
 
             //Rotate parent around child
             parent.rotationQuaternion = new BABYLON.Quaternion()
-            var eulerRotation = new BABYLON.Vector3(0,Math.PI/2,0)
+            var eulerRotation = new BABYLON.Vector3(0, Math.PI / 2, 0)
             var rotation = new BABYLON.Quaternion()
             BABYLON.Quaternion.RotationYawPitchRollToRef(eulerRotation.y, eulerRotation.x, eulerRotation.z, rotation)
             parent.rotationQuaternion.multiplyInPlace(rotation);
             parent.position.rotateByQuaternionAroundPointToRef(rotation, child.absolutePosition, parent.position)
-            expect(parent.position.subtract(new BABYLON.Vector3(1,0,0)).length() < 0.00001).to.equal(true)
+            expect(parent.position.subtract(new BABYLON.Vector3(1, 0, 0)).length() < 0.00001).to.equal(true)
             expect(parent.rotationQuaternion.toEulerAngles().subtract(eulerRotation).length() < 0.00001).to.equal(true)
-            expect(child.absolutePosition.subtract(new BABYLON.Vector3(0,0,0)).length() < 0.00001).to.equal(true)
+            expect(child.absolutePosition.subtract(new BABYLON.Vector3(0, 0, 0)).length() < 0.00001).to.equal(true)
         });
     });
 });

tests/unit/babylon/src/PostProcess/babylon.postProcess.tests.ts

@@ -1,7 +1,7 @@
 /**
  * Describes the test suite.
  */
-describe('Babylon Scene Loader', function () {
+describe('Babylon Scene Loader', function() {
     let subject: BABYLON.Engine;
 
     this.timeout(10000);
@@ -9,11 +9,12 @@ describe('Babylon Scene Loader', function () {
     /**
      * Loads the dependencies.
      */
-    before(function (done) {
+    before(function(done) {
         this.timeout(180000);
         (BABYLONDEVTOOLS).Loader
             .useDist()
-            .load(function () {
+            .testMode()
+            .load(function() {
                 // Force apply promise polyfill for consistent behavior between PhantomJS, IE11, and other browsers.
                 BABYLON.PromisePolyfill.Apply(true);
                 done();
@@ -23,7 +24,7 @@ describe('Babylon Scene Loader', function () {
     /**
      * Create a new engine subject before each test.
      */
-    beforeEach(function () {
+    beforeEach(function() {
         subject = new BABYLON.NullEngine({
             renderHeight: 256,
             renderWidth: 256,
@@ -37,16 +38,16 @@ describe('Babylon Scene Loader', function () {
      * Integration tests for post processes.
      */
     describe('#postProcesses', () => {
-        it('Add default pipeline', () => {            
+        it('Add default pipeline', () => {
             const scene = new BABYLON.Scene(subject);
             var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 100, new BABYLON.Vector3(0, 0, 0), scene);
-            
+
             // Set caps so that HDR will be set when creating default pipeline
             var caps = subject.getCaps();
             caps.textureFloatRender = true;
 
-            var promise = new Promise<void>((res, rej)=>{
-                scene.whenReadyAsync().then(()=>{
+            var promise = new Promise<void>((res, rej) => {
+                scene.whenReadyAsync().then(() => {
                     let createShaderProgramSpy = sinon.spy(subject, "createShaderProgram");
                     var defaultPipeline = new BABYLON.DefaultRenderingPipeline("default", true, scene, [camera]);
                     // wait for all shaders to be compiled if needed

tests/unit/babylon/src/Tools/babylon.promise.tests.ts

@@ -1,16 +1,17 @@
 /**
  * Describes the test suite.
  */
-describe('Babylon.Promise', function () {
+describe('Babylon.Promise', function() {
     this.timeout(10000);
 
     /**
      * Loads the dependencies.
      */
-    before(function (done) {
+    before(function(done) {
         (BABYLONDEVTOOLS).Loader
             .useDist()
-            .load(function () {
+            .testMode()
+            .load(function() {
                 // Force apply promise polyfill for consistent behavior between PhantomJS, IE11, and other browsers.
                 BABYLON.PromisePolyfill.Apply(true);
                 done();
@@ -65,42 +66,42 @@ describe('Babylon.Promise', function () {
         it('should chain promises correctly #3', (done) => {
             var tempString = "";
             function resolveLater(resolve, reject) {
-                setTimeout(function () {
+                setTimeout(function() {
                     resolve(10);
                 }, 1000);
             }
             function rejectLater(resolve, reject) {
-                setTimeout(function () {
+                setTimeout(function() {
                     reject(20);
                 }, 1000);
             }
 
             var p1 = (<any>Promise).resolve('foo');
-            var p2 = p1.then(function () {
+            var p2 = p1.then(function() {
                 // Return promise here, that will be resolved to 10 after 1 second
                 return new Promise(resolveLater);
             });
-            p2.then(function (v) {
+            p2.then(function(v) {
                 tempString += 'resolved ' + v;  // "resolved", 10
-            }, function (e) {
+            }, function(e) {
                 // not called
                 tempString += 'rejected' + e;
             });
 
-            var p3 = p1.then(function () {
+            var p3 = p1.then(function() {
                 // Return promise here, that will be rejected with 20 after 1 second
                 return new Promise(rejectLater);
             });
-            p3.then(function (v) {
+            p3.then(function(v) {
                 // not called
                 tempString += 'resolved ' + v;
-            }, function (e) {
+            }, function(e) {
                 tempString += 'rejected ' + e; // "rejected", 20
                 try {
                     expect(tempString).to.eq("resolved 10rejected 20");
                     done();
                 }
-                catch(error) {
+                catch (error) {
                     done(error);
                 }
             });
@@ -115,7 +116,7 @@ describe('Babylon.Promise', function () {
                     expect(tempString).to.eq("first second third");
                     done();
                 }
-                catch(error) {
+                catch (error) {
                     done(error);
                 }
             });
@@ -125,28 +126,28 @@ describe('Babylon.Promise', function () {
 
         it('should chain promises correctly #5', (done) => {
             var tempString = "";
-            var promise = new Promise(function (resolve) {
-                setTimeout(function () {
+            var promise = new Promise(function(resolve) {
+                setTimeout(function() {
                     resolve(44);
                 }, 100);
             });
-        
-            promise = promise.then(function () {
+
+            promise = promise.then(function() {
                 return 55;
             });
-        
-            promise.then(function (value) {
+
+            promise.then(function(value) {
                 tempString += "1: " + value;
-                setTimeout(function () {
-                    promise.then(function (value) {
+                setTimeout(function() {
+                    promise.then(function(value) {
                         tempString += " 2: " + value;
                         try {
                             expect(tempString).to.eq("1: 55 2: 55");
                             done();
                         }
-                        catch(error) {
+                        catch (error) {
                             done(error);
-                        }                        
+                        }
                     });
                 }, 0);
             });
@@ -154,28 +155,28 @@ describe('Babylon.Promise', function () {
 
         it('should chain promises correctly #6', (done) => {
             var tempString = "";
-            var promise = new Promise(function (resolve) {
-                setTimeout(function () {
+            var promise = new Promise(function(resolve) {
+                setTimeout(function() {
                     resolve(44);
                 }, 100);
             });
-        
-            promise = promise.then(function () {
+
+            promise = promise.then(function() {
                 return Promise.resolve(55);
             });
-        
-            promise.then(function (value) {
+
+            promise.then(function(value) {
                 tempString += "1: " + value;
-                setTimeout(function () {
-                    promise.then(function (value) {
+                setTimeout(function() {
+                    promise.then(function(value) {
                         tempString += " 2: " + value;
                         try {
                             expect(tempString).to.eq("1: 55 2: 55");
                             done();
                         }
-                        catch(error) {
+                        catch (error) {
                             done(error);
-                        }                        
+                        }
                     });
                 }, 0);
             });
@@ -185,17 +186,17 @@ describe('Babylon.Promise', function () {
     describe('#Promise.all', () => {
         it('should agregate promises correctly', (done) => {
             var promise1 = Promise.resolve(3);
-            var promise2 = new Promise(function (resolve, reject) {
+            var promise2 = new Promise(function(resolve, reject) {
                 setTimeout(resolve, 100, 'foo');
             });
             var promise3 = Promise.resolve(42);
 
-            Promise.all([promise1, promise2, promise3]).then(function (values) {
+            Promise.all([promise1, promise2, promise3]).then(function(values) {
                 try {
                     values.should.deep.equal([3, "foo", 42]);
                     done();
                 }
-                catch(error) {
+                catch (error) {
                     done(error);
                 }
             });
@@ -212,39 +213,39 @@ describe('Babylon.Promise', function () {
                         number.should.be.equal(3);
                         done();
                     }
-                    catch(error) {
+                    catch (error) {
                         done(error);
                     }
                 });
         });
 
         it('should correctly handle then multiple times', (done) => {
-            var promise = Promise.resolve().then(function () {
-                return new Promise(function (resolve) {
-                    setTimeout(function () {
+            var promise = Promise.resolve().then(function() {
+                return new Promise(function(resolve) {
+                    setTimeout(function() {
                         resolve(123);
                     }, 100);
                 });
             });
-            
-            promise.then(function (result1) {
+
+            promise.then(function(result1) {
                 try {
                     result1.should.be.equal(123);
                 }
-                catch(error) {
+                catch (error) {
                     done(error);
                 }
-                return promise.then(function (result2) {
+                return promise.then(function(result2) {
                     try {
                         result2.should.be.equal(123);
                         done();
                     }
-                    catch(error) {
+                    catch (error) {
                         done(error);
                     }
                 });
-            });    
-        });        
+            });
+        });
 
     });
 
@@ -274,16 +275,16 @@ describe('Babylon.Promise', function () {
 
     describe('#All and then', () => {
         it('should correctly handle chaining a returning then after a all', (done) => {
-            var promise = Promise.all([BABYLON.Tools.DelayAsync(100), BABYLON.Tools.DelayAsync(200)]).then(function () {
+            var promise = Promise.all([BABYLON.Tools.DelayAsync(100), BABYLON.Tools.DelayAsync(200)]).then(function() {
                 return 1;
             });
 
-            promise.then(function (value) {
+            promise.then(function(value) {
                 try {
                     expect(value).to.equal(1);
                     done();
                 }
-                catch(error) {
+                catch (error) {
                     done(error);
                 }
             });
@@ -294,21 +295,21 @@ describe('Babylon.Promise', function () {
         it('should correctly handle moving children', (done) => {
             var callback1Count = 0;
             var callback2Count = 0;
-            Promise.resolve().then(function () {
-                var promise = Promise.all([BABYLON.Tools.DelayAsync(100), BABYLON.Tools.DelayAsync(200)]).then(function () {
+            Promise.resolve().then(function() {
+                var promise = Promise.all([BABYLON.Tools.DelayAsync(100), BABYLON.Tools.DelayAsync(200)]).then(function() {
                     callback1Count++;
                 });
-                Promise.all([promise]).then(function () {
+                Promise.all([promise]).then(function() {
                     callback2Count++;
                 });
                 return promise;
-            }).then(function () {
+            }).then(function() {
                 try {
                     expect(callback1Count).to.equal(1);
                     expect(callback2Count).to.equal(1);
                     done();
                 }
-                catch(error) {
+                catch (error) {
                     done(error);
                 }
             });
@@ -326,7 +327,7 @@ describe('Babylon.Promise', function () {
                     expect(error.message).to.equal(errorValue);
                     done();
                 }
-                catch(error) {
+                catch (error) {
                     done(error);
                 }
             });
@@ -344,7 +345,7 @@ describe('Babylon.Promise', function () {
                     expect(error.message).to.equal(errorValue);
                     done();
                 }
-                catch(error) {
+                catch (error) {
                     done(error);
                 }
             });

tests/unit/babylon/src/babylon.node.tests.ts

@@ -7,11 +7,12 @@ describe('Babylon Node', () => {
     /**
      * Loads the dependencies.
      */
-    before(function (done) {
+    before(function(done) {
         this.timeout(180000);
         (BABYLONDEVTOOLS).Loader
             .useDist()
-            .load(function () {
+            .testMode()
+            .load(function() {
                 // Force apply promise polyfill for consistent behavior between PhantomJS, IE11, and other browsers.
                 BABYLON.PromisePolyfill.Apply(true);
                 done();
@@ -21,7 +22,7 @@ describe('Babylon Node', () => {
     /**
      * Create a new engine subject before each test.
      */
-    beforeEach(function () {
+    beforeEach(function() {
         subject = new BABYLON.NullEngine({
             renderHeight: 256,
             renderWidth: 256,

tests/unit/tsconfig.json

@@ -1,14 +1,16 @@
 {
-    "compilerOptions": {
-      "target": "es5",
-      "module": "none",
-      "lib": [
-        "dom",
-        "es2015.promise",
-        "es5"
-    ]
-    },
-    "exclude": [
-      "node_modules"
+  "compilerOptions": {
+    "target": "es5",
+    "module": "none",
+    "lib": [
+      "es5",
+      "dom",
+      "es2015.promise",
+      "es2015.collection",
+      "es2015.iterable"
     ]
+  },
+  "exclude": [
+    "node_modules"
+  ]
 }