Quick fixes for inspector

inspector/src/components/actionTabs/actionTabs.scss

@@ -720,7 +720,8 @@
                         grid-template-columns: 1fr auto;
                         background: #555555;    
                         height: 30px;   
-                        padding-right: 5px;
+                        padding-right: 5px;                        
+                        cursor: pointer;
                         
                         .title {
                             margin-left: 5px;
@@ -734,7 +735,6 @@
                             display: flex;
                             align-items: center;  
                             justify-items: center;
-                            cursor: pointer;
                             transform-origin: center;
 
                             &.closed {

inspector/src/components/actionTabs/lineContainerComponent.tsx

@@ -23,11 +23,11 @@ export class LineContainerComponent extends React.Component<ILineContainerCompon
         const className = this.state.isExpanded ? "collapse" : "collapse closed";
 
         return (
-            <div className="header">
+            <div className="header" onClick={() => this.switchExpandedState()}>
                 <div className="title">
                     {this.props.title}
                 </div>
-                <div className={className} onClick={() => this.switchExpandedState()}>
+                <div className={className}>
                     <FontAwesomeIcon icon={faChevronDown} />
                 </div>
             </div>

inspector/src/components/actionTabs/tabs/propertyGrids/materials/pbrMaterialPropertyGridComponent.tsx

@@ -50,13 +50,13 @@ export class PBRMaterialPropertyGridComponent extends React.Component<IPBRMateri
         return (
             <div className="pane">
                 <CommonMaterialPropertyGridComponent material={material} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                {this.renderTextures()}
                 <LineContainerComponent title="LIGHTING & COLORS">
                     <Color3LineComponent label="Albedo" target={material} propertyName="albedoColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <Color3LineComponent label="Reflectivity" target={material} propertyName="reflectivityColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <Color3LineComponent label="Emissive" target={material} propertyName="emissiveColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <Color3LineComponent label="Ambient" target={material} propertyName="ambientColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 </LineContainerComponent>
-                {this.renderTextures()}
                 <LineContainerComponent title="LEVELS" closed={true}>
                     <SliderLineComponent label="Environment intensity" target={material} propertyName="environmentIntensity" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <SliderLineComponent label="Metallic" target={material} propertyName="metallic" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />

inspector/src/components/actionTabs/tabs/propertyGrids/materials/standardMaterialPropertyGridComponent.tsx

@@ -56,6 +56,7 @@ export class StandardMaterialPropertyGridComponent extends React.Component<IStan
         return (
             <div className="pane">
                 <CommonMaterialPropertyGridComponent material={material} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                {this.renderTextures()}
                 <LineContainerComponent title="LIGHTING & COLORS">
                     <Color3LineComponent label="Diffuse" target={material} propertyName="diffuseColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <Color3LineComponent label="Specular" target={material} propertyName="specularColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
@@ -63,7 +64,6 @@ export class StandardMaterialPropertyGridComponent extends React.Component<IStan
                     <Color3LineComponent label="Emissive" target={material} propertyName="emissiveColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <Color3LineComponent label="Ambient" target={material} propertyName="ambientColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 </LineContainerComponent>
-                {this.renderTextures()}
             </div>
         );
     }

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

@@ -84,6 +84,8 @@ export class ScenePropertyGridComponent extends React.Component<IScenePropertyGr
                     <RadioButtonLineComponent onSelectionChangedObservable={renderingModeGroupObservable} label="Solid" isSelected={() => !scene.forcePointsCloud && !scene.forceWireframe} onSelect={() => this.setRenderingModes(false, false)} />
                 </LineContainerComponent>
                 <LineContainerComponent title="ENVIRONMENT">
+                    <Color3LineComponent label="Clear color" target={scene} propertyName="clearColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <CheckBoxLineComponent label="Clear color enabled" target={scene} propertyName="autoClear" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <Color3LineComponent label="Ambient color" target={scene} propertyName="ambientColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <CheckBoxLineComponent label="Environment texture (IBL)" isSelected={() => scene.environmentTexture != null} onSelect={() => this.switchIBL()} />
                     {

inspector/src/components/sceneExplorer/entities/sceneTreeItemComponent.tsx

@@ -15,6 +15,7 @@ interface ISceneTreeItemComponentProps {
 export class SceneTreeItemComponent extends React.Component<ISceneTreeItemComponentProps, { isSelected: boolean, isInPickingMode: boolean, gizmoMode: number }> {
     private _onPointerObserver: Nullable<Observer<PointerInfo>>;
     private _onSelectionChangeObserver: Nullable<Observer<any>>;
+    private _selectedEntity: any;
 
     constructor(props: ISceneTreeItemComponentProps) {
         super(props);
@@ -55,6 +56,7 @@ export class SceneTreeItemComponent extends React.Component<ISceneTreeItemCompon
 
         const scene = this.props.scene;
         this._onSelectionChangeObserver = this.props.onSelectionChangedObservable.add((entity) => {
+            this._selectedEntity = entity;
             if (scene.metadata && scene.metadata.gizmoManager) {
                 const manager: GizmoManager = scene.metadata.gizmoManager;
 
@@ -143,6 +145,14 @@ export class SceneTreeItemComponent extends React.Component<ISceneTreeItemCompon
                     manager.scaleGizmoEnabled = true;
                     break;
             }
+
+            if (this._selectedEntity && this._selectedEntity.getClassName) {
+                const className = this._selectedEntity.getClassName();
+
+                if (className === "TransformNode" || className.indexOf("Mesh") !== -1) {
+                    manager.attachToMesh(this._selectedEntity);
+                }
+            }
         }
 
         this.setState({ gizmoMode: mode });

src/Helpers/babylon.sceneHelpers.ts

@@ -184,11 +184,11 @@ module BABYLON {
     Scene.prototype.createDefaultXRExperienceAsync = function(): Promise<BABYLON.WebXRExperienceHelper> {
         return BABYLON.WebXRExperienceHelper.CreateAsync(this).then((helper) => {
             var outputCanvas = new BABYLON.WebXRManagedOutputCanvas(helper);
-            return BABYLON.WebXREnterExitUI.CreateAsync(this, helper, {outputCanvasContext: outputCanvas.canvasContext})
-            .then((ui) => {
-                new BABYLON.WebXRInput(helper);
-                return helper;
-            });
+            return BABYLON.WebXREnterExitUI.CreateAsync(this, helper, { outputCanvasContext: outputCanvas.canvasContext })
+                .then((ui) => {
+                    new BABYLON.WebXRInput(helper);
+                    return helper;
+                });
         });
     };
 }