Inspector - fix bug when resizing the window does not resize panes

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

@@ -26,21 +26,21 @@ var INSPECTOR;
                 // resize canvas
                 // canvas.style.width = 'calc(100% - 750px - 12px)';
                 // get canvas style                
-                var canvasOrigStyle = window.getComputedStyle(canvas);
+                var canvasComputedStyle = Inspector.WINDOW.getComputedStyle(canvas);
                 this._canvasStyle = {
-                    width: canvasOrigStyle.width,
-                    height: canvasOrigStyle.height,
-                    position: canvasOrigStyle.position,
-                    padding: canvasOrigStyle.padding,
-                    paddingBottom: canvasOrigStyle.paddingBottom,
-                    paddingLeft: canvasOrigStyle.paddingLeft,
-                    paddingTop: canvasOrigStyle.paddingTop,
-                    paddingRight: canvasOrigStyle.paddingRight,
-                    margin: canvasOrigStyle.margin,
-                    marginBottom: canvasOrigStyle.marginBottom,
-                    marginLeft: canvasOrigStyle.marginLeft,
-                    marginTop: canvasOrigStyle.marginTop,
-                    marginRight: canvasOrigStyle.marginRight
+                    width: canvasComputedStyle.width,
+                    height: canvasComputedStyle.height,
+                    position: canvasComputedStyle.position,
+                    padding: canvasComputedStyle.padding,
+                    paddingBottom: canvasComputedStyle.paddingBottom,
+                    paddingLeft: canvasComputedStyle.paddingLeft,
+                    paddingTop: canvasComputedStyle.paddingTop,
+                    paddingRight: canvasComputedStyle.paddingRight,
+                    margin: canvasComputedStyle.margin,
+                    marginBottom: canvasComputedStyle.marginBottom,
+                    marginLeft: canvasComputedStyle.marginLeft,
+                    marginTop: canvasComputedStyle.marginTop,
+                    marginRight: canvasComputedStyle.marginRight
                 };
                 // Create c2di wrapper
                 this._c2diwrapper = INSPECTOR.Helpers.CreateDiv('insp-wrapper');
@@ -48,6 +48,15 @@ var INSPECTOR;
                 for (var prop in this._canvasStyle) {
                     this._c2diwrapper.style[prop] = this._canvasStyle[prop];
                 }
+                // 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;
+                this._c2diwrapper.style.width = pWidth + "%";
+                this._c2diwrapper.style.height = pheight + "%";
                 // reset canvas style
                 canvas.style.position = "static";
                 canvas.style.width = "100%";
@@ -1847,7 +1856,7 @@ var INSPECTOR;
          * Returns the total width in pixel of this tab, 0 by default
         */
         Tab.prototype.getPixelWidth = function () {
-            var style = window.getComputedStyle(this._div);
+            var style = INSPECTOR.Inspector.WINDOW.getComputedStyle(this._div);
             var left = parseFloat(style.marginLeft.substr(0, style.marginLeft.length - 2)) || 0;
             var right = parseFloat(style.marginRight.substr(0, style.marginRight.length - 2)) || 0;
             return (this._div.clientWidth || 0) + left + right;
@@ -2925,7 +2934,7 @@ var INSPECTOR;
          * Returns the total width in pixel of this tool, 0 by default
         */
         AbstractTool.prototype.getPixelWidth = function () {
-            var style = window.getComputedStyle(this._elem);
+            var style = INSPECTOR.Inspector.WINDOW.getComputedStyle(this._elem);
             var left = parseFloat(style.marginLeft.substr(0, style.marginLeft.length - 2)) || 0;
             var right = parseFloat(style.marginRight.substr(0, style.marginRight.length - 2)) || 0;
             return (this._elem.clientWidth || 0) + left + right;

dist/preview release/split.js

@@ -369,6 +369,9 @@ var global = this
                 calculateSizes.call(pairs[i])
                 fitMinReverse.call(pairs[i])
             }
+            for (i = pairs.length - 1; i >= 0; i--) {
+                adjust.call(pairs[i],pairs[i].a[getBoundingClientRect]()[dimension])
+            }
         }
       , setElementSize = function (el, size, gutterSize) {
             // Split.js allows setting sizes via numbers (ideally), or if you must,

inspector/index.html

@@ -21,9 +21,8 @@
 
         #game-canvas {
             width:75%;
-            height:75%; 
+            height:60%; 
             position:absolute;
-            margin-left:30px;
             top:0;
             left:0;
         }

inspector/src/Inspector.ts

@@ -47,22 +47,23 @@ module INSPECTOR {
                 // canvas.style.width = 'calc(100% - 750px - 12px)';
 
                 // get canvas style                
-                let canvasOrigStyle  = window.getComputedStyle(canvas);
+                let canvasComputedStyle  = Inspector.WINDOW.getComputedStyle(canvas);
+
                 this._canvasStyle = { 
-                    width        : canvasOrigStyle.width, 
-                    height       : canvasOrigStyle.height,
-                    position     : canvasOrigStyle.position,
-                    padding      : canvasOrigStyle.padding,
-                    paddingBottom: canvasOrigStyle.paddingBottom,
-                    paddingLeft  : canvasOrigStyle.paddingLeft,
-                    paddingTop   : canvasOrigStyle.paddingTop,
-                    paddingRight : canvasOrigStyle.paddingRight,
-
-                    margin       : canvasOrigStyle.margin,
-                    marginBottom : canvasOrigStyle.marginBottom,
-                    marginLeft   : canvasOrigStyle.marginLeft,
-                    marginTop    : canvasOrigStyle.marginTop,
-                    marginRight  : canvasOrigStyle.marginRight
+                    width        : canvasComputedStyle.width, 
+                    height       : canvasComputedStyle.height,
+                    position     : canvasComputedStyle.position,
+                    padding      : canvasComputedStyle.padding,
+                    paddingBottom: canvasComputedStyle.paddingBottom,
+                    paddingLeft  : canvasComputedStyle.paddingLeft,
+                    paddingTop   : canvasComputedStyle.paddingTop,
+                    paddingRight : canvasComputedStyle.paddingRight,
+
+                    margin       : canvasComputedStyle.margin,
+                    marginBottom : canvasComputedStyle.marginBottom,
+                    marginLeft   : canvasComputedStyle.marginLeft,
+                    marginTop    : canvasComputedStyle.marginTop,
+                    marginRight  : canvasComputedStyle.marginRight
 
                 };
                 
@@ -73,6 +74,18 @@ module INSPECTOR {
                 for (let prop in this._canvasStyle) {
                     this._c2diwrapper.style[prop] = this._canvasStyle[prop];
                 }
+                // Convert wrapper size in % (because getComputedStyle returns px only)
+                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;
+
+                this._c2diwrapper.style.width = pWidth+"%";
+                this._c2diwrapper.style.height = pheight+"%";
+            
 
                 // reset canvas style
                 canvas.style.position = "static";

inspector/src/tabs/Tab.ts

@@ -60,7 +60,7 @@ module INSPECTOR{
          * Returns the total width in pixel of this tab, 0 by default
         */
         public getPixelWidth() : number {
-            let style = window.getComputedStyle(this._div);
+            let style = Inspector.WINDOW.getComputedStyle(this._div);
             let left = parseFloat(style.marginLeft.substr(0,style.marginLeft.length-2)) ||0;
             let right = parseFloat(style.marginRight.substr(0,style.marginRight.length-2)) ||0;
             return (this._div.clientWidth || 0) + left + right;

inspector/src/tools/AbstractTool.ts

@@ -25,7 +25,7 @@
          * Returns the total width in pixel of this tool, 0 by default
         */
         public getPixelWidth() : number {
-            let style = window.getComputedStyle(this._elem);
+            let style = Inspector.WINDOW.getComputedStyle(this._elem);
             let left = parseFloat(style.marginLeft.substr(0,style.marginLeft.length-2)) ||0;
             let right = parseFloat(style.marginRight.substr(0,style.marginRight.length-2)) ||0;
             return (this._elem.clientWidth || 0) + left + right;