Merge pull request #8827 from BabylonJS/msDestiny14/inspector

Inspector: Launch tool from Icon

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

@@ -1,13 +1,14 @@
 import { IExplorerExtensibilityGroup } from "babylonjs/Debug/debugLayer";
 import { Material } from "babylonjs/Materials/material";
-
-import { faBrush } from '@fortawesome/free-solid-svg-icons';
+import { faBrush, faPen } from '@fortawesome/free-solid-svg-icons';
 import { TreeItemLabelComponent } from "../treeItemLabelComponent";
 import { ExtensionsComponent } from "../extensionsComponent";
 import * as React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { NodeMaterial } from 'babylonjs/Materials/Node/nodeMaterial';
 
 interface IMaterialTreeItemComponentProps {
-    material: Material,
+    material: Material | NodeMaterial,
     extensibilityGroups?: IExplorerExtensibilityGroup[],
     onClick: () => void
 }
@@ -18,12 +19,19 @@ export class MaterialTreeItemComponent extends React.Component<IMaterialTreeItem
     }
 
     render() {
+
+        const nmeIcon = this.props.material.getClassName() === "NodeMaterial" ?
+            <div className="icon" onClick={() => {(this.props.material as NodeMaterial).edit()}} title="Node Material Editor" color="white">
+            <FontAwesomeIcon icon={faPen} />
+            </div> : null;
+
         return (
             <div className="materialTools">
                 <TreeItemLabelComponent label={this.props.material.name} onClick={() => this.props.onClick()} icon={faBrush} color="orange" />
                 {
-                    <ExtensionsComponent target={this.props.material} extensibilityGroups={this.props.extensibilityGroups} />
+                   <ExtensionsComponent target={this.props.material} extensibilityGroups={this.props.extensibilityGroups} />
                 }
+                {nmeIcon}
             </div>
         )
     }

inspector/src/components/sceneExplorer/sceneExplorer.scss

@@ -469,6 +469,13 @@
                 width: 20px;
                 grid-column: 2;
             }
+            
+            .icon {
+                display: grid;
+                align-items: center;   
+                justify-items: center;
+                cursor: pointer;
+            }
         }
 
         .particleSystemTools {

nodeEditor/src/components/nodeList/nodeListComponent.tsx

@@ -278,7 +278,7 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
             });
 
             if(key === "Custom_Frames") {
-                let line =  <LineWithFileButtonComponent title={"Add Custom Frame"} closed={false}
+                let line =  <LineWithFileButtonComponent key="add..."title={"Add Custom Frame"} closed={false}
                 label="Add..." uploadName={'custom-frame-upload'} iconImage={addButton} accept=".json" onIconClick={(file) => {
                     this.loadCustomFrame(file);
                 }}/>;