Add more info for grid property grid

dist/preview release/babylon.max.js

@@ -20611,7 +20611,7 @@ var BABYLON;
             if (yawCor === void 0) { yawCor = 0; }
             if (pitchCor === void 0) { pitchCor = 0; }
             if (rollCor === void 0) { rollCor = 0; }
-            var yaw = -Math.atan2(localAxis.z, localAxis.x) - Math.PI / 2;
+            var yaw = Math.atan2(localAxis.z, localAxis.x) + 3 * Math.PI / 2;
             var len = Math.sqrt(localAxis.x * localAxis.x + localAxis.z * localAxis.z);
             var pitch = Math.atan2(localAxis.y, len);
             if (this.rotationQuaternion) {

dist/preview release/babylon.no-module.max.js

@@ -20578,7 +20578,7 @@ var BABYLON;
             if (yawCor === void 0) { yawCor = 0; }
             if (pitchCor === void 0) { pitchCor = 0; }
             if (rollCor === void 0) { rollCor = 0; }
-            var yaw = -Math.atan2(localAxis.z, localAxis.x) - Math.PI / 2;
+            var yaw = Math.atan2(localAxis.z, localAxis.x) + 3 * Math.PI / 2;
             var len = Math.sqrt(localAxis.x * localAxis.x + localAxis.z * localAxis.z);
             var pitch = Math.atan2(localAxis.y, len);
             if (this.rotationQuaternion) {

dist/preview release/es6.js

@@ -20578,7 +20578,7 @@ var BABYLON;
             if (yawCor === void 0) { yawCor = 0; }
             if (pitchCor === void 0) { pitchCor = 0; }
             if (rollCor === void 0) { rollCor = 0; }
-            var yaw = -Math.atan2(localAxis.z, localAxis.x) - Math.PI / 2;
+            var yaw = Math.atan2(localAxis.z, localAxis.x) + 3 * Math.PI / 2;
             var len = Math.sqrt(localAxis.x * localAxis.x + localAxis.z * localAxis.z);
             var pitch = Math.atan2(localAxis.y, len);
             if (this.rotationQuaternion) {

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

@@ -1002,6 +1002,10 @@ declare module BABYLON.GUI {
                 * An event triggered after the control was drawn
                 */
             onAfterDrawObservable: BABYLON.Observable<Control>;
+            /**
+                * Get the hosting AdvancedDynamicTexture
+                */
+            readonly host: AdvancedDynamicTexture;
             /** Gets or set information about font offsets (used to render and align text) */
             fontOffset: {
                     ascent: number;

dist/preview release/gui/babylon.gui.module.d.ts

@@ -1109,6 +1109,10 @@ declare module 'babylonjs-gui/2D/controls/control' {
                 * An event triggered after the control was drawn
                 */
             onAfterDrawObservable: Observable<Control>;
+            /**
+                * Get the hosting AdvancedDynamicTexture
+                */
+            readonly host: AdvancedDynamicTexture;
             /** Gets or set information about font offsets (used to render and align text) */
             fontOffset: {
                     ascent: number;
@@ -4162,6 +4166,10 @@ declare module BABYLON.GUI {
                 * An event triggered after the control was drawn
                 */
             onAfterDrawObservable: BABYLON.Observable<Control>;
+            /**
+                * Get the hosting AdvancedDynamicTexture
+                */
+            readonly host: AdvancedDynamicTexture;
             /** Gets or set information about font offsets (used to render and align text) */
             fontOffset: {
                     ascent: number;

gui/src/2D/controls/control.ts

@@ -239,6 +239,13 @@ export class Control {
      */
     public onAfterDrawObservable = new Observable<Control>();
 
+    /**
+     * Get the hosting AdvancedDynamicTexture
+     */
+    public get host(): AdvancedDynamicTexture {
+        return this._host;
+    }
+
     /** Gets or set information about font offsets (used to render and align text) */
     public get fontOffset(): { ascent: number, height: number, descent: number } {
         return this._fontOffset;

inspector/src/components/actionTabs/tabs/debugTabComponent.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { PaneComponent, IPaneComponentProps } from "../paneComponent";
 import { LineContainerComponent } from "../lineContainerComponent";
 import { CheckBoxLineComponent } from "../lines/checkBoxLineComponent";
-import { GridPropertyGridComponent } from "./propertyGrids/gridPropertyGridComponent";
+import { RenderGridPropertyGridComponent } from "./propertyGrids/renderGridPropertyGridComponent";
 
 export class DebugTabComponent extends PaneComponent {
     private _skeletonViewersEnabled = false;
@@ -107,7 +107,7 @@ export class DebugTabComponent extends PaneComponent {
         return (
             <div className="pane">
                 <LineContainerComponent title="HELPERS">
-                    <GridPropertyGridComponent scene={scene} />
+                    <RenderGridPropertyGridComponent scene={scene} />
                     <CheckBoxLineComponent label="Bones" isSelected={() => this._skeletonViewersEnabled} onSelect={() => this.switchSkeletonViewers()} />
                     <CheckBoxLineComponent label="Physics" isSelected={() => this._physicsViewersEnabled} onSelect={() => this.switchPhysicsViewers()} />
                 </LineContainerComponent>

inspector/src/components/actionTabs/tabs/propertyGrids/gui/gridPropertyGridComponent.tsx

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { Observable } from "babylonjs";
+import { PropertyChangedEvent } from "../../../../propertyChangedEvent";
+import { CommonControlPropertyGridComponent } from "./commonControlPropertyGridComponent";
+import { LockObject } from "../lockObject";
+import { Grid } from "babylonjs-gui/2D/controls/grid";
+import { LineContainerComponent } from "components/actionTabs/lineContainerComponent";
+import { TextLineComponent } from "components/actionTabs/lines/textLineComponent";
+
+interface IGridPropertyGridComponentProps {
+    grid: Grid,
+    lockObject: LockObject,
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>
+}
+
+export class ControlPropertyGridComponent extends React.Component<IGridPropertyGridComponentProps> {
+    constructor(props: IGridPropertyGridComponentProps) {
+        super(props);
+    }
+
+    // renderRows() {
+    //     const grid = this.props.grid;
+    //     const rows = [];
+
+    //     for (var index = 0; index < grid.rowCount; index++) {
+    //         rows.push(grid.getRowDefinition(index)!);
+    //     }
+
+    //     return (
+    //         rows.map((rd, i) => {
+    //             return (
+    //                 <TextLineComponent label={`Row #${i}`} value={rd.internalValue} />
+    //             )
+    //         })
+    //     );
+    // }
+
+    render() {
+        const grid = this.props.grid;
+
+        const cols = [];
+
+
+
+        for (var index = 0; index < grid.rowCount; index++) {
+            cols.push(grid.getColumnDefinition(index));
+        }
+
+        return (
+            <div className="pane">
+                <CommonControlPropertyGridComponent lockObject={this.props.lockObject} control={grid} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                <LineContainerComponent title="GRID">
+                    {
+                        //     this.renderRows()
+                    }
+                </LineContainerComponent>
+            </div>
+        );
+    }
+}

inspector/src/components/actionTabs/tabs/propertyGrids/gridPropertyGridComponent.tsx

@@ -2,14 +2,14 @@ import * as React from "react";
 import { Scene, AbstractMesh, Nullable } from "babylonjs";
 import { CheckBoxLineComponent } from "../../lines/checkBoxLineComponent";
 
-interface IGridPropertyGridComponentProps {
+interface IRenderGridPropertyGridComponentProps {
     scene: Scene
 }
 
-export class GridPropertyGridComponent extends React.Component<IGridPropertyGridComponentProps, { isEnabled: boolean }> {
+export class RenderGridPropertyGridComponent extends React.Component<IRenderGridPropertyGridComponentProps, { isEnabled: boolean }> {
     private _gridMesh: Nullable<AbstractMesh>;
 
-    constructor(props: IGridPropertyGridComponentProps) {
+    constructor(props: IRenderGridPropertyGridComponentProps) {
         super(props);
         this.state = { isEnabled: false };
     }