first scene bar

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

@@ -2,7 +2,7 @@ import { AbstractMesh, Mesh } from "babylonjs";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCube } from '@fortawesome/free-solid-svg-icons';
 import { faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
-import { faArrowsAlt } from '@fortawesome/free-solid-svg-icons';
+import { faVectorSquare } from '@fortawesome/free-solid-svg-icons';
 import { TreeItemLabelComponent } from "../treeItemLabelComponent";
 import { IExtensibilityGroup } from "../../../inspector";
 import { ExtensionsComponent } from "../extensionsComponent";
@@ -84,9 +84,9 @@ export class MeshTreeItemComponent extends React.Component<IMeshTreeItemComponen
             <div className="meshTools">
                 <TreeItemLabelComponent label={mesh.name} onClick={() => this.props.onClick()} icon={faCube} color="dodgerblue" />
                 <div className={this.state.isGizmoEnabled ? "gizmo selected icon" : "gizmo icon"} onClick={() => this.showGizmos()} title="Show/Hide position gizmo">
-                    <FontAwesomeIcon icon={faArrowsAlt} />
+                    <FontAwesomeIcon icon={faVectorSquare} />
                 </div>
-                <div className="visibility  icon" onClick={() => this.switchVisibility()} title="Show/Hide mesh">
+                <div className="visibility icon" onClick={() => this.switchVisibility()} title="Show/Hide mesh">
                     {visibilityElement}
                 </div>
                 {

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

@@ -1,6 +1,6 @@
 import { Scene, Observable, PointerInfo, Observer, Nullable } from "babylonjs";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSyncAlt, faImage, faCrosshairs } from '@fortawesome/free-solid-svg-icons';
+import { faSyncAlt, faImage, faCrosshairs, faArrowsAlt, faCompress, faRedoAlt } from '@fortawesome/free-solid-svg-icons';
 import { IExtensibilityGroup } from "../../../inspector";
 import { ExtensionsComponent } from "../extensionsComponent";
 import * as React from "react";
@@ -13,13 +13,13 @@ interface ISceneTreeItemComponentProps {
     onSelectionChangeObservable?: Observable<any>
 }
 
-export class SceneTreeItemComponent extends React.Component<ISceneTreeItemComponentProps, { isSelected: boolean, isInPickingMode: boolean }> {
+export class SceneTreeItemComponent extends React.Component<ISceneTreeItemComponentProps, { isSelected: boolean, isInPickingMode: boolean, gizmoMode: number }> {
     private _onPointerObserver: Nullable<Observer<PointerInfo>>;
 
     constructor(props: ISceneTreeItemComponentProps) {
         super(props);
 
-        this.state = { isSelected: false, isInPickingMode: false };
+        this.state = { isSelected: false, isInPickingMode: false, gizmoMode: 0 };
     }
 
     shouldComponentUpdate(nextProps: ISceneTreeItemComponentProps, nextState: { isSelected: boolean, isInPickingMode: boolean }) {
@@ -74,7 +74,8 @@ export class SceneTreeItemComponent extends React.Component<ISceneTreeItemCompon
         this.setState({ isInPickingMode: !this.state.isInPickingMode });
     }
 
-    showExtensions() {
+    setGizmoMode(mode: number) {
+        this.setState({ gizmoMode: mode });
     }
 
     render() {
@@ -84,6 +85,16 @@ export class SceneTreeItemComponent extends React.Component<ISceneTreeItemCompon
                     <div className="sceneTitle" onClick={() => this.onSelect()} >
                         <FontAwesomeIcon icon={faImage} />&nbsp;Scene
                     </div>
+                    <div className={this.state.gizmoMode === 1 ? "translation selected icon" : "translation icon"} onClick={() => this.setGizmoMode(1)} title="Enable/Disable position mode">
+                        <FontAwesomeIcon icon={faArrowsAlt} />
+                    </div>
+                    <div className={this.state.gizmoMode === 2 ? "rotation selected icon" : "rotation icon"} onClick={() => this.setGizmoMode(2)} title="Enable/Disable rotation mode">
+                        <FontAwesomeIcon icon={faRedoAlt} />
+                    </div>
+                    <div className={this.state.gizmoMode === 3 ? "scaling selected icon" : "scaling icon"} onClick={() => this.setGizmoMode(3)} title="Enable/Disable scaling mode">
+                        <FontAwesomeIcon icon={faCompress} />
+                    </div>
+                    <div className="separator" />
                     <div className={this.state.isInPickingMode ? "pickingMode selected icon" : "pickingMode icon"} onClick={() => this.onPickingMode()} title="Turn picking mode on/off">
                         <FontAwesomeIcon icon={faCrosshairs} />
                     </div>

inspector/src/components/sceneExplorer/sceneExplorer.scss

@@ -216,7 +216,7 @@
             grid-column: 2;
             margin-left: -10px;
             display: grid;
-            grid-template-columns: 1fr 20px 20px auto 5px;
+            grid-template-columns: 1fr 20px 20px 20px 10px 20px 20px auto 5px;
             align-items: center;
             cursor: pointer;         
 
@@ -226,10 +226,46 @@
                 display: flex;
                 align-items: center;   
                 height: 24px;       
+            }            
+
+            .translation {
+                grid-column: 2;
+                opacity: 0.6;
+               
+                &.selected {
+                    opacity: 1;
+                }    
+            }
+
+            .rotation {
+                grid-column: 3;
+                opacity: 0.6;
+
+                &.selected {
+                    opacity: 1;
+                }    
+            }
+
+            .scaling {
+                grid-column: 4;
+                opacity: 0.6;
+                &.selected {
+                    opacity: 1;
+                }    
+            }
+
+            .separator {
+                grid-column: 5;
+                margin-left: 5px;    
+                width: 5px;
+                display: flex;
+                align-items: center;   
+                height: 18px;           
+                border-left: solid 1px rgb(51, 122, 183);
             }
 
             .pickingMode {
-                grid-column: 2;
+                grid-column: 6;
                 opacity: 0.6;
 
                 &.selected {
@@ -238,12 +274,12 @@
             }
 
             .refresh {
-                grid-column: 3;
+                grid-column: 7;
             }
 
             .extensions {
                 width: 20px;
-                grid-column: 4;
+                grid-column: 8;
             }
         }