Merge pull request #9141 from Popov72/nme-comment-field

Possibility to add a comment to a NME material

nodeEditor/src/components/propertyTab/propertyTab.scss

@@ -128,6 +128,31 @@
         }
     }
     
+    .textInputArea {
+        padding-left: $line-padding-left;
+        height: 100%;
+        display: grid;
+        grid-template-columns: 1fr 120px;
+
+        .label {
+            grid-column: 1;
+            display: flex;
+            align-items: center;
+        }
+
+        .value {                        
+            display: flex;
+            align-items: center;
+            grid-column: 2;
+            
+            textarea {
+                width: calc(150% - 5px);
+                margin-left: -50%;
+                height: 40px;
+            }
+        }
+    }
+    
     .paneContainer {
         margin-top: 3px;
         display:grid;

nodeEditor/src/components/propertyTab/propertyTabComponent.tsx

@@ -34,6 +34,7 @@ import { isFramePortData } from '../../diagram/graphCanvas';
 import { OptionsLineComponent } from '../../sharedComponents/optionsLineComponent';
 import { NodeMaterialModes } from 'babylonjs/Materials/Node/Enums/nodeMaterialModes';
 import { PreviewType } from '../preview/previewType';
+import { TextInputLineComponent } from '../../sharedComponents/textInputLineComponent';
 require("./propertyTab.scss");
 
 interface IPropertyTabComponentProps {
@@ -369,6 +370,7 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
                         <OptionsLineComponent ref={this._modeSelect} label="Mode" target={this} getSelection={(target) => this.props.globalState.mode} options={modeList} onSelect={(value) => this.changeMode(value)} />
                         <TextLineComponent label="Version" value={Engine.Version}/>
                         <TextLineComponent label="Help" value="doc.babylonjs.com" underline={true} onLink={() => window.open('https://doc.babylonjs.com/how_to/node_material', '_blank')}/>
+                        <TextInputLineComponent label="Comment" multilines={true} value={this.props.globalState.nodeMaterial!.comment} target={this.props.globalState.nodeMaterial} propertyName="comment" globalState={this.props.globalState}/>
                         <ButtonLineComponent label="Reset to default" onClick={() => {
                             switch (this.props.globalState.mode) {
                                 case NodeMaterialModes.Material:

nodeEditor/src/sharedComponents/textInputLineComponent.tsx

@@ -9,6 +9,7 @@ interface ITextInputLineComponentProps {
     target?: any;
     propertyName?: string;
     value?: string;
+    multilines?: boolean;
     onChange?: (value: string) => void;
     validator?: (value: string) => boolean;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
@@ -20,7 +21,7 @@ export class TextInputLineComponent extends React.Component<ITextInputLineCompon
     constructor(props: ITextInputLineComponentProps) {
         super(props);
 
-        this.state = { value: this.props.value !== undefined ? this.props.value : this.props.target[this.props.propertyName!] || "" }
+        this.state = { value: this.props.value !== undefined ? this.props.value : this.props.target[this.props.propertyName!] || "" };
     }
 
     shouldComponentUpdate(nextProps: ITextInputLineComponentProps, nextState: { value: string }) {
@@ -60,8 +61,8 @@ export class TextInputLineComponent extends React.Component<ITextInputLineCompon
         this._localChange = true;
         const store = this.props.value !== undefined ? this.props.value : this.props.target[this.props.propertyName!];
 
-        if(this.props.validator && raisePropertyChanged) {
-            if(this.props.validator(value) == false) {
+        if (this.props.validator && raisePropertyChanged) {
+            if (this.props.validator(value) == false) {
                 value = store;
             }
         }
@@ -79,23 +80,39 @@ export class TextInputLineComponent extends React.Component<ITextInputLineCompon
 
     render() {
         return (
-            <div className="textInputLine">
+            <div className={this.props.multilines ? "textInputArea" : "textInputLine"}>
                 <div className="label">
                     {this.props.label}
                 </div>
                 <div className="value">
-                    <input value={this.state.value} 
-                        onFocus={() => this.props.globalState.blockKeyboardEvents = true}
-                        onChange={evt => this.updateValue(evt.target.value, false)}
-                        onKeyDown={evt => {
-                            if (evt.keyCode !== 13) {
-                                return;
-                            }
-                            this.updateValue(this.state.value, true);
-                        }} onBlur={evt => {
-                            this.updateValue(evt.target.value, true)
-                            this.props.globalState.blockKeyboardEvents = false;
-                        }}/>
+                    {this.props.multilines && <>
+                        <textarea value={this.state.value}
+                            onFocus={() => this.props.globalState.blockKeyboardEvents = true}
+                            onChange={(evt) => this.updateValue(evt.target.value, false)}
+                            onKeyDown={(evt) => {
+                                if (evt.keyCode !== 13) {
+                                    return;
+                                }
+                                this.updateValue(this.state.value, true);
+                            }} onBlur={(evt) => {
+                                this.updateValue(evt.target.value, true);
+                                this.props.globalState.blockKeyboardEvents = false;
+                            }}/>
+                    </>}
+                    {!this.props.multilines && <>
+                        <input value={this.state.value}
+                            onFocus={() => this.props.globalState.blockKeyboardEvents = true}
+                            onChange={(evt) => this.updateValue(evt.target.value, false)}
+                            onKeyDown={(evt) => {
+                                if (evt.keyCode !== 13) {
+                                    return;
+                                }
+                                this.updateValue(this.state.value, true);
+                            }} onBlur={(evt) => {
+                                this.updateValue(evt.target.value, true);
+                                this.props.globalState.blockKeyboardEvents = false;
+                            }}/>
+                        </>}
                 </div>
             </div>
         );

src/Materials/Node/nodeMaterial.ts

@@ -261,6 +261,12 @@ export class NodeMaterial extends PushMaterial {
     }
 
     /**
+     * A free comment about the material
+     */
+    @serialize("comment")
+    public comment: string;
+
+    /**
      * Create a new node based material
      * @param name defines the material name
      * @param scene defines the hosting scene
@@ -1809,6 +1815,8 @@ export class NodeMaterial extends PushMaterial {
             this.editorData.map = blockMap;
         }
 
+        this.comment = source.comment;
+
         if (!merge) {
             this._mode = source.mode ?? NodeMaterialModes.Material;
         }