Merge pull request #1586 from Temechon/master

Inspector - Open the inspector as a popup at start

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

@@ -19,10 +19,10 @@ declare module INSPECTOR {
         /** The original canvas style, before applying the inspector*/
         private _canvasStyle;
         /** The inspector is created with the given engine.
-         * If a HTML parent is not given as a parameter, the inspector is created as a right panel on the main window.
-         * If a HTML parent is given, the inspector is created in this element, taking full size of its parent.
+         * If the parameter 'popup' is false, the inspector is created as a right panel on the main window.
+         * If the parameter 'popup' is true, the inspector is created in another popup.
          */
-        constructor(scene: BABYLON.Scene, parent?: HTMLElement);
+        constructor(scene: BABYLON.Scene, popup?: boolean);
         /** Build the inspector panel in the given HTML element */
         private _buildInspector(parent);
         scene: BABYLON.Scene;
@@ -40,8 +40,10 @@ declare module INSPECTOR {
          * remove the right panel and remove the wrapper
          */
         dispose(): void;
-        /** Open the inspector in a new popup */
-        openPopup(): void;
+        /** Open the inspector in a new popup
+         * Set 'firstTime' to true if there is no inspector created beforehands
+         */
+        openPopup(firstTime?: boolean): void;
     }
 }
 

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

@@ -2,10 +2,10 @@ var INSPECTOR;
 (function (INSPECTOR) {
     var Inspector = (function () {
         /** The inspector is created with the given engine.
-         * If a HTML parent is not given as a parameter, the inspector is created as a right panel on the main window.
-         * If a HTML parent is given, the inspector is created in this element, taking full size of its parent.
+         * If the parameter 'popup' is false, the inspector is created as a right panel on the main window.
+         * If the parameter 'popup' is true, the inspector is created in another popup.
          */
-        function Inspector(scene, parent) {
+        function Inspector(scene, popup) {
             var _this = this;
             /** True if the inspector is built as a popup tab */
             this._popupMode = false;
@@ -15,9 +15,9 @@ var INSPECTOR;
             Inspector.DOCUMENT = window.document;
             Inspector.WINDOW = window;
             // POPUP MODE if parent is defined
-            if (parent) {
+            if (popup) {
                 // Build the inspector in the given parent
-                this._buildInspector(parent);
+                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
@@ -31,6 +31,10 @@ var INSPECTOR;
                     width: canvasComputedStyle.width,
                     height: canvasComputedStyle.height,
                     position: canvasComputedStyle.position,
+                    top: canvasComputedStyle.top,
+                    bottom: canvasComputedStyle.top,
+                    left: canvasComputedStyle.top,
+                    right: canvasComputedStyle.top,
                     padding: canvasComputedStyle.padding,
                     paddingBottom: canvasComputedStyle.paddingBottom,
                     paddingLeft: canvasComputedStyle.paddingLeft,
@@ -51,10 +55,12 @@ var INSPECTOR;
                 // Convert wrapper size in % (because getComputedStyle returns px only)
                 var widthPx = parseFloat(canvasComputedStyle.width.substr(0, canvasComputedStyle.width.length - 2)) || 0;
                 var heightPx = parseFloat(canvasComputedStyle.height.substr(0, canvasComputedStyle.height.length - 2)) || 0;
-                var windowWidthPx = window.innerWidth;
-                var windowHeightPx = window.innerHeight;
-                var pWidth = widthPx / windowWidthPx * 100;
-                var pheight = heightPx / windowHeightPx * 100;
+                // Check if the parent of the canvas is the body page. If yes, the size ratio is computed
+                var parent_1 = canvas.offsetParent;
+                var parentWidthPx = parent_1.clientWidth;
+                var parentHeightPx = parent_1.clientHeight;
+                var pWidth = widthPx / parentWidthPx * 100;
+                var pheight = heightPx / parentHeightPx * 100;
                 this._c2diwrapper.style.width = pWidth + "%";
                 this._c2diwrapper.style.height = pheight + "%";
                 // reset canvas style
@@ -163,8 +169,10 @@ var INSPECTOR;
                 INSPECTOR.Helpers.SEND_EVENT('resize');
             }
         };
-        /** Open the inspector in a new popup */
-        Inspector.prototype.openPopup = function () {
+        /** Open the inspector in a new popup
+         * Set 'firstTime' to true if there is no inspector created beforehands
+         */
+        Inspector.prototype.openPopup = function (firstTime) {
             // Create popup
             var popup = window.open('', 'Babylon.js INSPECTOR', 'toolbar=no,resizable=yes,menubar=no,width=750,height=1000');
             popup.document.title = 'Babylon.js INSPECTOR';
@@ -180,8 +188,10 @@ var INSPECTOR;
                 link.href = links[l].href;
                 popup.document.head.appendChild(link);
             }
-            // Dispose the right panel
-            this.dispose();
+            // Dispose the right panel if existing
+            if (!firstTime) {
+                this.dispose();
+            }
             // set the mode as popup
             this._popupMode = true;
             // Save the HTML document

inspector/index.html

@@ -26,11 +26,16 @@
             top:0;
             left:0;
         }
+        .fakeToolbar {
+            height:150px;
+            background-color: #333;
+        }
 
     </style>
 
 </head>
 <body>
+    <div class="fakeToolbar"></div>
     <!--The game canvas-->
     <canvas id="game-canvas"></canvas> 
 

inspector/src/Inspector.ts

@@ -23,10 +23,10 @@ module INSPECTOR {
         private _canvasStyle :any ;
 
         /** The inspector is created with the given engine.
-         * If a HTML parent is not given as a parameter, the inspector is created as a right panel on the main window.
-         * If a HTML parent is given, the inspector is created in this element, taking full size of its parent.
+         * If the parameter 'popup' is false, the inspector is created as a right panel on the main window.
+         * If the parameter 'popup' is true, the inspector is created in another popup.
          */
-        constructor(scene: BABYLON.Scene, parent?:HTMLElement) {
+        constructor(scene: BABYLON.Scene, popup?:boolean) {
 
             // get canvas parent only if needed.
             this._scene     = scene;
@@ -36,9 +36,9 @@ module INSPECTOR {
             Inspector.WINDOW = window;                       
             
             // POPUP MODE if parent is defined
-            if (parent) {    
+            if (popup) {    
                 // Build the inspector in the given parent
-                this._buildInspector(parent);
+                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();            
@@ -52,7 +52,13 @@ module INSPECTOR {
                 this._canvasStyle = { 
                     width        : canvasComputedStyle.width, 
                     height       : canvasComputedStyle.height,
+
                     position     : canvasComputedStyle.position,
+                    top          : canvasComputedStyle.top,
+                    bottom       : canvasComputedStyle.top,
+                    left         : canvasComputedStyle.top,
+                    right        : canvasComputedStyle.top,
+
                     padding      : canvasComputedStyle.padding,
                     paddingBottom: canvasComputedStyle.paddingBottom,
                     paddingLeft  : canvasComputedStyle.paddingLeft,
@@ -78,10 +84,13 @@ module INSPECTOR {
                 let widthPx        = parseFloat(canvasComputedStyle.width.substr(0,canvasComputedStyle.width.length-2)) || 0;
                 let heightPx       = parseFloat(canvasComputedStyle.height.substr(0,canvasComputedStyle.height.length-2)) || 0;
 
-                let windowWidthPx  = window.innerWidth;
-                let windowHeightPx = window.innerHeight;
-                let pWidth = widthPx / windowWidthPx * 100;
-                let pheight = heightPx / windowHeightPx * 100;
+                // Check if the parent of the canvas is the body page. If yes, the size ratio is computed
+                let parent = canvas.offsetParent;
+
+                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+"%";
@@ -202,8 +211,10 @@ module INSPECTOR {
             }
         }
         
-        /** Open the inspector in a new popup */
-        public openPopup() {    
+        /** Open the inspector in a new popup
+         * Set 'firstTime' to true if there is no inspector created beforehands
+         */
+        public openPopup(firstTime?:boolean) {    
             // Create popup
             let popup = window.open('', 'Babylon.js INSPECTOR', 'toolbar=no,resizable=yes,menubar=no,width=750,height=1000');
             popup.document.title = 'Babylon.js INSPECTOR';
@@ -219,8 +230,10 @@ module INSPECTOR {
                 link.href = (links[l] as HTMLLinkElement).href;
                 popup.document.head.appendChild(link);              
             } 
-            // Dispose the right panel
-            this.dispose();
+            // Dispose the right panel if existing
+            if (!firstTime) {
+                this.dispose();
+            }
             // set the mode as popup
             this._popupMode = true;
             // Save the HTML document

inspector/test/index.js

@@ -17,7 +17,7 @@ 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();
+        this.scene.debugLayer.show(true);
         this.scene.executeWhenReady(function () {
             _this._initGame();
             _this.engine.runRenderLoop(function () {

src/Debug/babylon.debugLayer.ts

@@ -14,9 +14,9 @@ module BABYLON {
         }
 
         /** Creates the inspector window. */
-        private _createInspector() {
+        private _createInspector(popup?:boolean) {
             if (!this._inspector) {
-                this._inspector = new INSPECTOR.Inspector(this._scene);
+                this._inspector = new INSPECTOR.Inspector(this._scene, popup);
             } // else nothing to do,; instance is already existing
         }
         
@@ -31,13 +31,13 @@ module BABYLON {
             }
         }
         
-        public show() {
+        public show(popup?:boolean) {
             if (typeof INSPECTOR == 'undefined') {
                 // Load inspector and add it to the DOM
-                Tools.LoadScript(DebugLayer.InspectorURL, this._createInspector.bind(this));
+                Tools.LoadScript(DebugLayer.InspectorURL, this._createInspector.bind(this, popup));
             } else {
                 // Otherwise creates the inspector
-                this._createInspector();
+                this._createInspector(popup);
             }
         }