Inspector - fix display bug

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

@@ -23,6 +23,13 @@ declare module INSPECTOR {
          * If the parameter 'popup' is true, the inspector is created in another popup.
          */
         constructor(scene: BABYLON.Scene, popup?: boolean);
+        /**
+         * If the given element has a position 'asbolute' or 'relative',
+         * returns the first parent of the given element that has a position 'relative' or 'absolute'.
+         * If the given element has no position, returns the first parent
+         *
+         */
+        private _getRelativeParent(elem, lookForAbsoluteOrRelative?);
         /** Build the inspector panel in the given HTML element */
         private _buildInspector(parent);
         scene: BABYLON.Scene;

dist/preview release/inspector/babylon.inspector.js

@@ -23,6 +23,7 @@ var INSPECTOR;
                 // Get canvas and its DOM parent
                 var canvas = this._scene.getEngine().getRenderingCanvas();
                 var canvasParent = canvas.parentElement;
+                var canvasParentComputedStyle = Inspector.WINDOW.getComputedStyle(canvasParent);
                 // resize canvas
                 // canvas.style.width = 'calc(100% - 750px - 12px)';
                 // get canvas style                
@@ -32,9 +33,9 @@ var INSPECTOR;
                     height: canvasComputedStyle.height,
                     position: canvasComputedStyle.position,
                     top: canvasComputedStyle.top,
-                    bottom: canvasComputedStyle.top,
-                    left: canvasComputedStyle.top,
-                    right: canvasComputedStyle.top,
+                    bottom: canvasComputedStyle.bottom,
+                    left: canvasComputedStyle.left,
+                    right: canvasComputedStyle.right,
                     padding: canvasComputedStyle.padding,
                     paddingBottom: canvasComputedStyle.paddingBottom,
                     paddingLeft: canvasComputedStyle.paddingLeft,
@@ -56,7 +57,7 @@ var INSPECTOR;
                 var widthPx = parseFloat(canvasComputedStyle.width.substr(0, canvasComputedStyle.width.length - 2)) || 0;
                 var heightPx = parseFloat(canvasComputedStyle.height.substr(0, canvasComputedStyle.height.length - 2)) || 0;
                 // Check if the parent of the canvas is the body page. If yes, the size ratio is computed
-                var parent_1 = canvas.offsetParent;
+                var parent_1 = this._getRelativeParent(canvas);
                 var parentWidthPx = parent_1.clientWidth;
                 var parentHeightPx = parent_1.clientHeight;
                 var pWidth = widthPx / parentWidthPx * 100;
@@ -101,6 +102,39 @@ var INSPECTOR;
             // Refresh the inspector
             this.refresh();
         }
+        /**
+         * If the given element has a position 'asbolute' or 'relative',
+         * returns the first parent of the given element that has a position 'relative' or 'absolute'.
+         * If the given element has no position, returns the first parent
+         *
+         */
+        Inspector.prototype._getRelativeParent = function (elem, lookForAbsoluteOrRelative) {
+            // If the elem has no parent, returns himself
+            if (!elem.parentElement) {
+                return elem;
+            }
+            var computedStyle = Inspector.WINDOW.getComputedStyle(elem);
+            // looking for the first element absolute or relative
+            if (lookForAbsoluteOrRelative) {
+                // if found, return this one
+                if (computedStyle.position === "relative" || computedStyle.position === "absolute") {
+                    return elem;
+                }
+                else {
+                    // otherwise keep looking
+                    return this._getRelativeParent(elem.parentElement, true);
+                }
+            }
+            else {
+                if (computedStyle.position == "static") {
+                    return elem.parentElement;
+                }
+                else {
+                    // the elem has a position relative or absolute, look for the closest relative/absolute parent
+                    return this._getRelativeParent(elem.parentElement, true);
+                }
+            }
+        };
         /** Build the inspector panel in the given HTML element */
         Inspector.prototype._buildInspector = function (parent) {
             // tabbar

inspector/index.html

@@ -19,10 +19,10 @@
             font-family:sans-serif;
         }
 
+        /* First try : PG-like
         #game-canvas {
             width:75%;
-            height:60%; 
-            position:absolute;
+            height:100%; 
             top:0;
             left:0;
         }
@@ -30,13 +30,36 @@
             height:150px;
             background-color: #333;
         }
+        .mini {
+            display:flex;
+            height:calc(100% - 150px);
+        }
+        .fakeBarAgain {
+            width:50%;
+            background-color: #333;
+        }*/
+        
+        #game-canvas {
+            position:absolute;
+            width:100%;
+            height:100%; 
+            top:0;
+            left : 150px;
+        }
 
     </style>
 
 </head>
 <body>
+    
+    <!-- First try : PG-like
     <div class="fakeToolbar"></div>
-    <!--The game canvas-->
+    <div class="mini">
+        <div class="fakeBarAgain"></div>
+        <canvas id="game-canvas"></canvas> 
+    </div>
+    -->
+    <!--Second try : Sandbox-like-->
     <canvas id="game-canvas"></canvas> 
 
     <!--Starting the game-->

inspector/src/Inspector.ts

@@ -41,8 +41,9 @@ module INSPECTOR {
                 this.openPopup(true);// set to true in order to NOT dispose the inspector (done in openPopup), as it's not existing yet
             } else {        
                 // Get canvas and its DOM parent
-                let canvas            = this._scene.getEngine().getRenderingCanvas();            
-                let canvasParent      = canvas.parentElement;                                
+                let canvas                    = this._scene.getEngine().getRenderingCanvas();            
+                let canvasParent              = canvas.parentElement;            
+                let canvasParentComputedStyle = Inspector.WINDOW.getComputedStyle(canvasParent);            
                 // resize canvas
                 // canvas.style.width = 'calc(100% - 750px - 12px)';
 
@@ -55,9 +56,9 @@ module INSPECTOR {
 
                     position     : canvasComputedStyle.position,
                     top          : canvasComputedStyle.top,
-                    bottom       : canvasComputedStyle.top,
-                    left         : canvasComputedStyle.top,
-                    right        : canvasComputedStyle.top,
+                    bottom       : canvasComputedStyle.bottom,
+                    left         : canvasComputedStyle.left,
+                    right        : canvasComputedStyle.right,
 
                     padding      : canvasComputedStyle.padding,
                     paddingBottom: canvasComputedStyle.paddingBottom,
@@ -85,16 +86,16 @@ module INSPECTOR {
                 let heightPx       = parseFloat(canvasComputedStyle.height.substr(0,canvasComputedStyle.height.length-2)) || 0;
 
                 // Check if the parent of the canvas is the body page. If yes, the size ratio is computed
-                let parent = canvas.offsetParent;
+                let parent = this._getRelativeParent(canvas);
 
                 let parentWidthPx  = parent.clientWidth;
                 let parentHeightPx = parent.clientHeight;
+                
                 let pWidth = widthPx / parentWidthPx * 100;
                 let pheight = heightPx / parentHeightPx * 100;
 
                 this._c2diwrapper.style.width = pWidth+"%";
-                this._c2diwrapper.style.height = pheight+"%";
-            
+                this._c2diwrapper.style.height = pheight+"%";            
 
                 // reset canvas style
                 canvas.style.position = "static";
@@ -140,6 +141,39 @@ module INSPECTOR {
             this.refresh();
         }
         
+        /**
+         * If the given element has a position 'asbolute' or 'relative', 
+         * returns the first parent of the given element that has a position 'relative' or 'absolute'.
+         * If the given element has no position, returns the first parent
+         * 
+         */
+        private _getRelativeParent(elem:HTMLElement, lookForAbsoluteOrRelative?:boolean) : HTMLElement{
+            // If the elem has no parent, returns himself
+            if (!elem.parentElement) {
+                return elem;
+            } 
+            let computedStyle = Inspector.WINDOW.getComputedStyle(elem);
+            // looking for the first element absolute or relative
+            if (lookForAbsoluteOrRelative) {
+                // if found, return this one
+                if (computedStyle.position === "relative" || computedStyle.position === "absolute") {
+                    return elem;
+                }else {
+                    // otherwise keep looking
+                    return this._getRelativeParent(elem.parentElement, true);
+                }
+            }
+            // looking for the relative parent of the element 
+            else {
+                if (computedStyle.position == "static") {
+                    return elem.parentElement;
+                } else {
+                    // the elem has a position relative or absolute, look for the closest relative/absolute parent
+                    return this._getRelativeParent(elem.parentElement, true);
+                }         
+            }   
+        }
+        
         /** Build the inspector panel in the given HTML element */
         private _buildInspector(parent:HTMLElement) {            
             // tabbar

inspector/test/index.js

@@ -17,7 +17,9 @@ var Test = (function () {
         var _this = this;
         this._initScene();
         // BABYLON.DebugLayer.InspectorURL = 'http://localhost:1338/dist/preview release/inspector/babylon.inspector.js';
-        this.scene.debugLayer.show(true);
+        window.addEventListener('click', () => {
+            this.scene.debugLayer.show();
+        })
         this.scene.executeWhenReady(function () {
             _this._initGame();
             _this.engine.runRenderLoop(function () {