Add edit icon for NG meshes (#14891)

BabylonJS · Mar 20, 2024 · ec187b0 · ec187b0
1 parent b3a351d
commit ec187b0
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 5 deletions.
diff --git a/packages/dev/inspector/src/components/sceneExplorer/entities/meshTreeItemComponent.tsx b/packages/dev/inspector/src/components/sceneExplorer/entities/meshTreeItemComponent.tsx
@@ -2,7 +2,7 @@ import type { IExplorerExtensibilityGroup } from "core/Debug/debugLayer";
 import type { AbstractMesh } from "core/Meshes/abstractMesh";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCube } from "@fortawesome/free-solid-svg-icons";
+import { faCube, faPen } from "@fortawesome/free-solid-svg-icons";
 import { faEye, faEyeSlash, faSquare } from "@fortawesome/free-regular-svg-icons";
 import { TreeItemLabelComponent } from "../treeItemLabelComponent";
 import { ExtensionsComponent } from "../extensionsComponent";
@@ -52,6 +52,17 @@ export class MeshTreeItemComponent extends React.Component<IMeshTreeItemComponen
         return typeof this.props.mesh.name === "string" ? this.props.mesh.name : "no name";
     }
 
+    private _editGeometry(): void {
+        const mesh = this.props.mesh;
+        mesh._internalMetadata.nodeGeometry.edit({
+            nodeGeometryEditorConfig: {
+                backgroundColor: mesh.getScene().clearColor,
+                hostMesh: mesh,
+                hostScene: mesh.getScene(),
+            },
+        });
+    }
+
     render() {
         const mesh = this.props.mesh;
 
@@ -60,6 +71,11 @@ export class MeshTreeItemComponent extends React.Component<IMeshTreeItemComponen
         return (
             <div className="meshTools">
                 <TreeItemLabelComponent label={this._getNameForLabel()} onClick={() => this.props.onClick()} icon={faCube} color="dodgerblue" />
+                {mesh._internalMetadata && mesh._internalMetadata.nodeGeometry && (
+                    <div className="edit icon" onClick={() => this._editGeometry()} title="Edit Node Geometry">
+                        <FontAwesomeIcon icon={faPen} />
+                    </div>
+                )}
                 <div
                     className={this.state.isBoundingBoxEnabled ? "bounding-box selected icon" : "bounding-box icon"}
                     onClick={() => this.showBoundingBox()}

diff --git a/packages/dev/inspector/src/components/sceneExplorer/sceneExplorer.scss b/packages/dev/inspector/src/components/sceneExplorer/sceneExplorer.scss
@@ -396,12 +396,17 @@
             grid-column: 2;
             width: 100%;
             display: grid;
-            grid-template-columns: 1fr 20px 20px auto 5px;
+            grid-template-columns: 1fr auto 20px 20px auto 5px;
             align-items: center;
             min-width: 0;
 
-            .bounding-box {
+            .edit {
+                width: 20px;
                 grid-column: 2;
+            }
+
+            .bounding-box {
+                grid-column: 3;
                 opacity: 0.5;
 
                 &.selected {
@@ -410,12 +415,12 @@
             }
 
             .visibility {
-                grid-column: 3;
+                grid-column: 4;
             }
 
             .extensions {
                 width: 20px;
-                grid-column: 4;
+                grid-column: 5;
             }
         }