Inspector - Retrieve the REAL width/height of the canvas in order to resize it perfectly once the inspector has been closed

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

@@ -88,8 +88,10 @@ declare module INSPECTOR {
         'Texture': {
             type: typeof BABYLON.Texture;
             properties: string[];
+            format: (tex: BABYLON.Texture) => string;
         };
         'ArcRotateCamera': {
+            type: typeof BABYLON.ArcRotateCamera;
             properties: string[];
         };
         'Scene': {

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

@@ -321,14 +321,56 @@ var INSPECTOR;
                 'uOffset',
                 'vOffset'
             ],
+            format: function (tex) { return tex.name; }
         },
         'ArcRotateCamera': {
-            // type: BABYLON.ArcRotateCamera,
-            properties: ['alpha', 'beta', 'radius']
+            type: BABYLON.ArcRotateCamera,
+            properties: [
+                'alpha',
+                'beta',
+                'radius',
+                'angularSensibilityX',
+                'angularSensibilityY',
+                'target',
+                'lowerAlphaLimit',
+                'lowerBetaLimit',
+                'upperAlphaLimit',
+                'upperBetaLimit',
+                'lowerRadiusLimit',
+                'upperRadiusLimit',
+                'pinchPrecision',
+                'wheelPrecision',
+                'allowUpsideDown',
+                'checkCollisions'
+            ]
         },
         'Scene': {
             type: BABYLON.Scene,
-            properties: ['actionManager', 'activeCamera', 'ambientColor', 'clearColor']
+            properties: [
+                'actionManager',
+                'activeCamera',
+                'ambientColor',
+                'clearColor',
+                'forceWireframe',
+                'forcePointsCloud',
+                'forceShowBoundingBoxes',
+                'useRightHandedSystem',
+                'hoverCursor',
+                'cameraToUseForPointers',
+                'fogEnabled',
+                'fogColor',
+                'fogDensity',
+                'fogStart',
+                'fogEnd',
+                'shadowsEnabled',
+                'lightsEnabled',
+                'collisionsEnabled',
+                'gravity',
+                'meshUnderPointer',
+                'pointerX',
+                'pointerY',
+                'uid'
+            ]
         },
         'Mesh': {
             type: BABYLON.Mesh,
@@ -338,7 +380,29 @@ var INSPECTOR;
                 'rotation',
                 'rotationQuaternion',
                 'absolutePosition',
-                'material'
+                'material',
+                'actionManager',
+                'visibility',
+                'isVisible',
+                'isPickable',
+                'renderingGroupId',
+                'receiveShadows',
+                'renderOutline',
+                'outlineColor',
+                'outlineWidth',
+                'renderOverlay',
+                'overlayColor',
+                'overlayAlpha',
+                'hasVertexAlpha',
+                'useVertexColors',
+                'layerMask',
+                'alwaysSelectAsActiveMesh',
+                'ellipsoid',
+                'ellipsoidOffset',
+                'edgesWidth',
+                'edgesColor',
+                'checkCollisions',
+                'hasLODLevels'
             ],
             format: function (m) { return m.name; }
         },

inspector/src/Inspector.ts

@@ -43,16 +43,14 @@ module INSPECTOR {
                 // Get canvas and its DOM parent
                 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)';
+                let canvasParentComputedStyle = Inspector.WINDOW.getComputedStyle(canvasParent);
 
                 // get canvas style                
                 let canvasComputedStyle  = Inspector.WINDOW.getComputedStyle(canvas);
 
                 this._canvasStyle = { 
-                    width        : canvasComputedStyle.width, 
-                    height       : canvasComputedStyle.height,
+                    width        : Helpers.Css(canvas, 'width'),
+                    height       : Helpers.Css(canvas, 'height'),
 
                     position     : canvasComputedStyle.position,
                     top          : canvasComputedStyle.top,

inspector/src/helpers/Helpers.ts

@@ -118,6 +118,19 @@ module INSPECTOR {
                 div.removeChild(div.firstChild);
             }
         }
+
+        /**
+         * Returns the true value of the given CSS Attribute from the given element (in percentage or in pixel, as it was specified in the css)
+         */
+        public static Css(elem:HTMLElement, cssAttribute:string) : string{
+            let clone = elem.cloneNode(true) as HTMLElement;
+            let div = Helpers.CreateDiv('', Inspector.DOCUMENT.body);
+            div.style.display = 'none';
+            div.appendChild(clone);
+            let value = Inspector.WINDOW.getComputedStyle(clone)[cssAttribute];
+            div.remove();
+            return value;
+        }
         
         public static LoadScript() {
             BABYLON.Tools.LoadFile("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/highlight.min.js", (elem) => {