Bring bounding box to list of gizmo selectors

inspector/src/components/actionTabs/tabs/propertyGrids/meshes/meshPropertyGridComponent.tsx

@@ -273,7 +273,6 @@ export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGrid
                     </LineContainerComponent>
                 }
                 <LineContainerComponent globalState={this.props.globalState} title="DEBUG" closed={true}>
-                    <CheckBoxLineComponent label="Show bounding box" target={mesh} propertyName="showBoundingBox" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     {
                         mesh.material &&
                         <CheckBoxLineComponent label="Display normals" isSelected={() => displayNormals} onSelect={() => this.displayNormals()} />

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

@@ -1,12 +1,9 @@
 import { IExplorerExtensibilityGroup } from "babylonjs/Debug/debugLayer";
-import { Color3 } from "babylonjs/Maths/math";
 import { AbstractMesh } from "babylonjs/Meshes/abstractMesh";
-import { BoundingBoxGizmo } from "babylonjs/Gizmos/boundingBoxGizmo";
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCube } from '@fortawesome/free-solid-svg-icons';
-import { faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
-import { faVectorSquare } from '@fortawesome/free-solid-svg-icons';
+import { faEye, faEyeSlash, faSquare } from '@fortawesome/free-regular-svg-icons';
 import { TreeItemLabelComponent } from "../treeItemLabelComponent";
 import { ExtensionsComponent } from "../extensionsComponent";
 import * as React from "react";
@@ -17,40 +14,19 @@ interface IMeshTreeItemComponentProps {
     onClick: () => void;
 }
 
-export class MeshTreeItemComponent extends React.Component<IMeshTreeItemComponentProps, { isGizmoEnabled: boolean, isVisible: boolean }> {
+export class MeshTreeItemComponent extends React.Component<IMeshTreeItemComponentProps, { isBoundingBoxEnabled: boolean, isVisible: boolean }> {
     constructor(props: IMeshTreeItemComponentProps) {
         super(props);
 
         const mesh = this.props.mesh;
 
-        this.state = { isGizmoEnabled: mesh.reservedDataStore && mesh.reservedDataStore.gizmo, isVisible: this.props.mesh.isVisible };
+        this.state = { isBoundingBoxEnabled: mesh.showBoundingBox, isVisible: this.props.mesh.isVisible };
     }
 
-    showGizmos(): void {
+    showBoundingBox(): void {
         const mesh = this.props.mesh;
-
-        if (!this.state.isGizmoEnabled) {
-
-            if (!mesh.reservedDataStore) {
-                mesh.reservedDataStore = {};
-            }
-
-            const gizmo = new BoundingBoxGizmo(Color3.FromHexString("#0984e3"));
-            gizmo.attachedMesh = mesh;
-            gizmo.enableDragBehavior();
-
-            gizmo.updateBoundingBox();
-
-            gizmo.fixedDragMeshScreenSize = true;
-            mesh.reservedDataStore.gizmo = gizmo;
-            this.setState({ isGizmoEnabled: true });
-            return;
-        }
-
-        mesh.reservedDataStore.gizmo.dispose();
-        mesh.reservedDataStore.gizmo = null;
-
-        this.setState({ isGizmoEnabled: false });
+        mesh.showBoundingBox = !this.state.isBoundingBoxEnabled;
+        this.setState({ isBoundingBoxEnabled: !this.state.isBoundingBoxEnabled });
     }
 
     switchVisibility(): void {
@@ -67,8 +43,8 @@ export class MeshTreeItemComponent extends React.Component<IMeshTreeItemComponen
         return (
             <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={faVectorSquare} />
+                <div className={this.state.isBoundingBoxEnabled ? "bounding-box selected icon" : "bounding-box icon"} onClick={() => this.showBoundingBox()} title="Show/Hide bounding box">
+                    <FontAwesomeIcon icon={faSquare} />
                 </div>
                 <div className="visibility icon" onClick={() => this.switchVisibility()} title="Show/Hide mesh">
                     {visibilityElement}

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

@@ -6,7 +6,7 @@ import { GizmoManager } from "babylonjs/Gizmos/gizmoManager";
 import { Scene } from "babylonjs/scene";
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSyncAlt, faImage, faCrosshairs, faArrowsAlt, faCompress, faRedoAlt } from '@fortawesome/free-solid-svg-icons';
+import { faSyncAlt, faImage, faCrosshairs, faArrowsAlt, faCompress, faRedoAlt, faVectorSquare } from '@fortawesome/free-solid-svg-icons';
 import { ExtensionsComponent } from "../extensionsComponent";
 import * as React from "react";
 
@@ -41,6 +41,8 @@ export class SceneTreeItemComponent extends React.Component<ISceneTreeItemCompon
                 gizmoMode = 2;
             } else if (manager.scaleGizmoEnabled) {
                 gizmoMode = 3;
+            } else if (manager.boundingBoxGizmoEnabled) {
+                gizmoMode = 4;
             }
         }
 
@@ -182,6 +184,7 @@ export class SceneTreeItemComponent extends React.Component<ISceneTreeItemCompon
             }
         })
 
+        manager.boundingBoxGizmoEnabled = false;
         manager.positionGizmoEnabled = false;
         manager.rotationGizmoEnabled = false;
         manager.scaleGizmoEnabled = false;
@@ -201,6 +204,9 @@ export class SceneTreeItemComponent extends React.Component<ISceneTreeItemCompon
                 case 3:
                     manager.scaleGizmoEnabled = true;
                     break;
+                case 4:
+                    manager.boundingBoxGizmoEnabled = true;
+                    break;
             }
 
             if (this._selectedEntity && this._selectedEntity.getClassName) {
@@ -233,6 +239,9 @@ export class SceneTreeItemComponent extends React.Component<ISceneTreeItemCompon
                     <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={this.state.gizmoMode === 4 ? "bounding selected icon" : "bounding icon"} onClick={() => this.setGizmoMode(4)} title="Enable/Disable bounding box mode">
+                        <FontAwesomeIcon icon={faVectorSquare} />
+                    </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} />

inspector/src/components/sceneExplorer/sceneExplorer.scss

@@ -259,7 +259,7 @@
             grid-column: 2;
             margin-left: -10px;
             display: grid;
-            grid-template-columns: 1fr 20px 20px 20px 10px 20px 20px auto 5px;
+            grid-template-columns: 1fr 20px 20px 20px 20px 10px 20px 20px auto 5px;
             align-items: center;
             cursor: pointer;         
 
@@ -296,9 +296,17 @@
                     opacity: 1;
                 }    
             }
+            
+            .bounding {
+                grid-column: 5;
+                opacity: 0.6;
+                &.selected {
+                    opacity: 1;
+                }    
+            }
 
             .separator {
-                grid-column: 5;
+                grid-column: 6;
                 margin-left: 5px;    
                 width: 5px;
                 display: flex;
@@ -308,7 +316,7 @@
             }
 
             .pickingMode {
-                grid-column: 6;
+                grid-column: 7;
                 opacity: 0.6;
 
                 &.selected {
@@ -317,12 +325,12 @@
             }
 
             .refresh {
-                grid-column: 7;
+                grid-column: 8;
             }
 
             .extensions {
                 width: 20px;
-                grid-column: 8;
+                grid-column: 9;
             }
         }
 
@@ -348,7 +356,7 @@
             align-items: center;
             min-width: 0;
 
-            .gizmo {
+            .bounding-box {
                 grid-column: 2;    
                 opacity: 0.5;