Integrate with sandbox

inspector/src/Inspector.ts

@@ -137,14 +137,15 @@ export class Inspector {
                 }, onClose: () => {
                     ReactDOM.unmountComponentAtNode(this._SceneExplorerHost!);
                     Inspector._OpenedPane--;
+
+                    if (this._SceneExplorerHost && this._SceneExplorerHost.parentElement) {
+                        this._SceneExplorerHost.parentElement.removeChild(this._SceneExplorerHost);
+                    }
+
                     this._Cleanup();
 
                     if (options.popup) {
                         this._SceneExplorerWindow.close();
-                    } else if (!options.overlay) {
-                        if (this._SceneExplorerHost) {
-                            this._SceneExplorerHost.style.width = "0";
-                        }
                     }
                 }
             });
@@ -198,12 +199,13 @@ export class Inspector {
                     ReactDOM.unmountComponentAtNode(this._ActionTabsHost!);
                     Inspector._OpenedPane--;
                     this._Cleanup();
+
+                    if (this._ActionTabsHost && this._ActionTabsHost.parentElement) {
+                        this._ActionTabsHost.parentElement.removeChild(this._ActionTabsHost);
+                    }                    
+
                     if (options.popup) {
                         this._ActionTabsWindow.close();
-                    } else if (!options.overlay) {
-                        if (this._ActionTabsHost) {
-                            this._ActionTabsHost.style.width = "0";
-                        }
                     }
 
                 }, onPropertyChangedObservable: Inspector.OnPropertyChangedObservable
@@ -259,6 +261,11 @@ export class Inspector {
 
                     this._OpenedPane = 0;
                     this._Cleanup();
+
+                    if (this._EmbedHost && this._EmbedHost.parentElement) {
+                        this._EmbedHost.parentElement.removeChild(this._EmbedHost);
+                    }    
+
                     if (options.popup) {
                         this._EmbedHostWindow.close();
                     }
@@ -419,6 +426,13 @@ export class Inspector {
                 this._NewCanvasContainer.style.width = "100%";
                 this._NewCanvasContainer.style.height = "100%";
 
+            } else if (!options.overlay && this._NewCanvasContainer && this._NewCanvasContainer.parentElement) {
+                // the root is now the parent of the canvas container
+                parentControl = this._NewCanvasContainer.parentElement;
+            }
+
+            if (this._NewCanvasContainer) {
+                // If we move things around, let's control the resize
                 if (options.handleResize && scene) {
                     this._OnBeforeRenderObserver = scene.onBeforeRenderObservable.add(() => {
                         scene.getEngine().resize();
@@ -456,16 +470,30 @@ export class Inspector {
     public static Hide() {
         if (this._ActionTabsHost) {
             ReactDOM.unmountComponentAtNode(this._ActionTabsHost);
+
+            if (this._ActionTabsHost.parentElement) {
+                this._ActionTabsHost.parentElement.removeChild(this._ActionTabsHost);
+            }
+
             this._ActionTabsHost = null;
         }
 
         if (this._SceneExplorerHost) {
             ReactDOM.unmountComponentAtNode(this._SceneExplorerHost);
+
+            if (this._SceneExplorerHost.parentElement) {
+                this._SceneExplorerHost.parentElement.removeChild(this._SceneExplorerHost);
+            }
+            
             this._SceneExplorerHost = null;
         }
 
         if (this._EmbedHost) {
             ReactDOM.unmountComponentAtNode(this._EmbedHost);
+
+            if (this._EmbedHost.parentElement) {
+                this._EmbedHost.parentElement.removeChild(this._EmbedHost);
+            }            
             this._EmbedHost = null;
         }
 

inspector/src/components/actionTabs/actionTabs.scss

@@ -413,7 +413,7 @@
                             display: block;
                             height: 14px;
                             width: 34px;
-                            margin-right: 10px;
+                            margin-right: 5px;
                             background: #898989;
                             border-radius: 100px;
                             cursor: pointer;
@@ -576,6 +576,7 @@
 
                     .slider {
                         grid-column: 2;
+                        margin-right: 5px;
                         
                         display: flex;
                         align-items: center;
@@ -639,8 +640,8 @@
                             -webkit-appearance: none;
                             border: none;
                             padding: 0;
-                            width: 24px;
-                            height: 24px;
+                            width: 20px;
+                            height: 20px;
                         }
                         input[type="color"]::-webkit-color-swatch-wrapper {
                             padding: 0;

inspector/src/components/actionTabs/lines/sliderLineComponent.tsx

@@ -56,7 +56,7 @@ export class SliderLineComponent extends React.Component<ISliderLineComponentPro
                     {this.props.label}
                 </div>
                 <div className="slider">
-                    {this.state.value.toFixed(2)}&nbsp;<input className="range" type="range" step={this.props.step} min={this.props.minimum} max={this.props.maximum} value={this.state.value} onChange={evt => this.onChange(evt.target.value)} />
+                    {this.state.value ? this.state.value.toFixed(2) : "0"}&nbsp;<input className="range" type="range" step={this.props.step} min={this.props.minimum} max={this.props.maximum} value={this.state.value} onChange={evt => this.onChange(evt.target.value)} />
                 </div>
             </div>
         );

inspector/src/components/sceneExplorer/sceneExplorer.scss

@@ -37,6 +37,7 @@
         user-select: none;                
 
         #logo {
+            position: relative;
             grid-column: 1; 
             width: 24px;
             height: 24px;

sandbox/index.css

@@ -13,7 +13,7 @@
 }
 
 #renderCanvas {
-    position: absolute;
+    position: relative;
     overflow: hidden;
     width: 100%;
     height: calc(100% - 56px);
@@ -22,7 +22,8 @@
     right: 0;
     left: 0;
     touch-action: none;
-    -ms-touch-action: none;
+    -ms-touch-action: none;    
+    margin-bottom: -4px
 }
 
 a {
@@ -35,7 +36,7 @@ a {
 
 
 .footer {
-    position: absolute;
+    position: relative;
     width: 100%;
     height: 56px;
     bottom: 0;
@@ -99,11 +100,14 @@ a {
 }
 
 #logo {
+    position: absolute;
+    top:0;
     width: 100%;
     height: 100%;
     background: url('./Assets/Logo_Fullscreen.svg') no-repeat 0 0;
     background-position: center;
     background-size: 50%;
+    pointer-events: none;
 }
 
 #droptext {

sandbox/index.js

@@ -59,7 +59,6 @@ if (BABYLON.Engine.isSupported()) {
     var currentPluginName;
     var skyboxPath = "https://assets.babylonjs.com/environments/environmentSpecular.env";
     var debugLayerEnabled = false;
-    var debugLayerLastActiveTab = 0;
 
     engine.loadingUIBackgroundColor = "#a9b5bc";
 
@@ -75,9 +74,9 @@ if (BABYLON.Engine.isSupported()) {
     BABYLON.Animation.AllowMatricesInterpolation = true;
 
     // Update the defaults of the GLTFTab in the inspector.
-    INSPECTOR.GLTFTab._GetLoaderDefaultsAsync().then(function(defaults) {
-        defaults.validate = true;
-    });
+    // INSPECTOR.GLTFTab._GetLoaderDefaultsAsync().then(function(defaults) {
+    //     defaults.validate = true;
+    // });
 
     // Setting up some GLTF values
     BABYLON.GLTFFileLoader.IncrementalLoading = false;
@@ -87,7 +86,6 @@ if (BABYLON.Engine.isSupported()) {
             plugin.onValidatedObservable.add(function(results) {
                 if (results.issues.numErrors > 0) {
                     debugLayerEnabled = true;
-                    debugLayerLastActiveTab = "GLTF";
                 }
             });
         }
@@ -213,7 +211,7 @@ if (BABYLON.Engine.isSupported()) {
         }
 
         if (debugLayerEnabled) {
-            currentScene.debugLayer.show({ initialTab: debugLayerLastActiveTab });
+            currentScene.debugLayer.show();
         }
     };
 
@@ -259,10 +257,6 @@ if (BABYLON.Engine.isSupported()) {
     else {
         var startProcessingFiles = function() {
             BABYLON.Tools.ClearLogCache();
-
-            if (currentScene) {
-                debugLayerLastActiveTab = currentScene.debugLayer.getActiveTab();
-            }
         };
 
         filesInput = new BABYLON.FilesInput(engine, null, sceneLoaded, null, null, null, startProcessingFiles, null, sceneError);
@@ -295,8 +289,6 @@ if (BABYLON.Engine.isSupported()) {
     window.addEventListener("keydown", function(event) {
         // Press R to reload
         if (event.keyCode === 82 && event.target.nodeName !== "INPUT" && currentScene) {
-            debugLayerLastActiveTab = currentScene.debugLayer.getActiveTab();
-
             if (assetUrl) {
                 loadFromAssetUrl();
             }
@@ -310,11 +302,10 @@ if (BABYLON.Engine.isSupported()) {
         if (currentScene) {
             if (currentScene.debugLayer.isVisible()) {
                 debugLayerEnabled = false;
-                debugLayerLastActiveTab = currentScene.debugLayer.getActiveTab();
                 currentScene.debugLayer.hide();
             }
             else {
-                currentScene.debugLayer.show({ initialTab: debugLayerLastActiveTab });
+                currentScene.debugLayer.show();
                 debugLayerEnabled = true;
             }
         }

src/Debug/babylon.debugLayer.ts

@@ -90,8 +90,8 @@ module BABYLON {
                 embedMode: config.embedMode != null ? config.embedMode : parentElement ? true : false,
                 embedHostRoot: null,
                 overlay: config.overlay,
-                handleResize: config.handleResize,
-                enablePopup: config.enablePopup
+                handleResize: config.handleResize || true,
+                enablePopup: config.enablePopup || true
             };
 
             if (parentElement) {