Home Explore Help
Register Sign In
zhangyupeng
/
Babylon.js
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Inspector - fix bug when adding the inspector on PG

Temechon 8 years ago
parent
f01ba2d4c6
commit
98b5ad25b9
2 changed files with 16 additions and 4 deletions
Unified View Show Diff Stats
  1. 5 0
      inspector/index.html
  2. 11 4
      inspector/src/Inspector.ts

+ 5 - 0
inspector/index.html
View File 

@@ -26,11 +26,16 @@
 
             top:0;

             top:0;

             left:0;

             left:0;

         }

         }

+        .fakeToolbar {

+            height:150px;

+            background-color: #333;

+        }

 

 

     </style>

     </style>

 

 

 </head>

 </head>

 <body>

 <body>

+    <div class="fakeToolbar"></div>

     <!--The game canvas-->

     <!--The game canvas-->

     <canvas id="game-canvas"></canvas> 

     <canvas id="game-canvas"></canvas>

+ 11 - 4
inspector/src/Inspector.ts
View File 

@@ -52,7 +52,13 @@ module INSPECTOR {
 
                 this._canvasStyle = { 

                 this._canvasStyle = { 

                     width        : canvasComputedStyle.width, 

                     width        : canvasComputedStyle.width, 

                     height       : canvasComputedStyle.height,

                     height       : canvasComputedStyle.height,

+                    

                     position     : canvasComputedStyle.position,

                     position     : canvasComputedStyle.position,

+                    top          : canvasComputedStyle.top,

+                    bottom       : canvasComputedStyle.top,

+                    left         : canvasComputedStyle.top,

+                    right        : canvasComputedStyle.top,

+

                     padding      : canvasComputedStyle.padding,

                     padding      : canvasComputedStyle.padding,

                     paddingBottom: canvasComputedStyle.paddingBottom,

                     paddingBottom: canvasComputedStyle.paddingBottom,

                     paddingLeft  : canvasComputedStyle.paddingLeft,

                     paddingLeft  : canvasComputedStyle.paddingLeft,

@@ -78,10 +84,11 @@ module INSPECTOR {
 
                 let widthPx        = parseFloat(canvasComputedStyle.width.substr(0,canvasComputedStyle.width.length-2)) || 0;

                 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 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 parentWidthPx  = canvas.parentElement.clientWidth;

+                let parentHeightPx = canvas.parentElement.clientHeight;

+                let pWidth = widthPx / parentWidthPx * 100;

+                let pheight = heightPx / parentHeightPx * 100;

 

 

                 this._c2diwrapper.style.width = pWidth+"%";

                 this._c2diwrapper.style.width = pWidth+"%";

                 this._c2diwrapper.style.height = pheight+"%";

                 this._c2diwrapper.style.height = pheight+"%";