Add comments to node

nodeEditor/src/diagram/graphCanvas.scss

@@ -6,6 +6,7 @@
     font: 14px "acumin-pro";  
     user-select: none;
     overflow: hidden;
+    cursor: move;   
     background-image:
         linear-gradient(to right, #4F4E4F 1px, transparent 1px),
         linear-gradient(to bottom, #4F4E4F 1px, transparent 1px);  
@@ -17,8 +18,7 @@
             z-index: 10;
             position: absolute;
             background: rgba(72, 72, 196, 0.5);
-            border: blue solid 4px;
-            border-radius: 10px;
+            border: blue solid 2px;
         }
     }
 
@@ -30,7 +30,6 @@
         transform-origin: left top;
         display: grid;
         grid-template: 100% 100%;     
-        cursor: move;   
 
         #graph-svg-container {
             grid-row: 1;
@@ -82,6 +81,18 @@
                 grid-template-columns: 100%;
                 color: white;
 
+                .comments {
+                    position: absolute;
+                    top: -50px;
+                    width: 200px;
+                    height: 45px;
+                    overflow: hidden;                    
+                    font-style: italic;
+                    opacity: 0.8;
+                    display: grid;
+                    align-items: flex-end;
+                }
+
                 .selection-border {                    
                     grid-row: 1 / span 3;
                     grid-column: 1;

nodeEditor/src/diagram/graphCanvas.tsx

@@ -43,7 +43,7 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
     private _candidateLink: Nullable<NodeLink> = null;
     private _candidatePort: Nullable<NodePort> = null;
     private _gridSize = 20;
-    private _selectionBox: Nullable<HTMLDivElement> = null;
+    private _selectionBox: Nullable<HTMLDivElement> = null;  
 
     private _altKeyIsPressed = false;
     private _ctrlKeyIsPressed = false;

nodeEditor/src/diagram/graphNode.ts

@@ -18,7 +18,8 @@ export class GraphNode {
     private _connections: HTMLDivElement;
     private _inputsContainer: HTMLDivElement;
     private _outputsContainer: HTMLDivElement;
-    private _content: HTMLDivElement;
+    private _content: HTMLDivElement;    
+    private _comments: HTMLDivElement;
     private _inputPorts: NodePort[] = [];
     private _outputPorts: NodePort[] = [];
     private _links: NodeLink[] = [];    
@@ -196,6 +197,9 @@ export class GraphNode {
         for (var port of this._outputPorts) {
             port.refresh();
         }
+
+        this._comments.innerHTML = this.block.comments;
+        this._comments.title = this.block.comments;
     }
 
     private _appendConnection(connectionPoint: NodeMaterialConnectionPoint, root: HTMLDivElement, displayManager: Nullable<IDisplayManager>) {
@@ -334,9 +338,14 @@ export class GraphNode {
         selectionBorder.classList.add("selection-border");
         this._visual.appendChild(selectionBorder);     
 
-
         root.appendChild(this._visual);
 
+        // Comments
+        this._comments = root.ownerDocument!.createElement("div");
+        this._comments.classList.add("comments");
+            
+        this._visual.appendChild(this._comments);    
+
         // Connections
         for (var input of this.block.inputs) {
             this._inputPorts.push(this._appendConnection(input, this._inputsContainer, this._displayManager));

nodeEditor/src/diagram/properties/PerturbNormalNodePropertyComponent.tsx

@@ -3,8 +3,7 @@ import * as React from "react";
 import { LineContainerComponent } from '../../sharedComponents/lineContainerComponent';
 import { IPropertyComponentProps } from './propertyComponentProps';
 import { CheckBoxLineComponent } from '../../sharedComponents/checkBoxLineComponent';
-import { TextInputLineComponent } from '../../sharedComponents/textInputLineComponent';
-import { TextLineComponent } from '../../sharedComponents/textLineComponent';
+import { GenericPropertyTabComponent } from './genericNodePropertyComponent';
 
 export class PerturbNormalPropertyTabComponent extends React.Component<IPropertyComponentProps> {
     constructor(props: IPropertyComponentProps) {
@@ -13,11 +12,8 @@ export class PerturbNormalPropertyTabComponent extends React.Component<IProperty
 
     render() {
         return (
-            <>
-                <LineContainerComponent title="GENERAL">
-                    <TextInputLineComponent globalState={this.props.globalState} label="Name" propertyName="name" target={this.props.block} onChange={() => this.props.globalState.onUpdateRequiredObservable.notifyObservers()} />
-                    <TextLineComponent label="Type" value={this.props.block.getClassName()} />
-                </LineContainerComponent>
+            <>                
+                <GenericPropertyTabComponent globalState={this.props.globalState} block={this.props.block}/>
                 <LineContainerComponent title="PROPERTIES">
                     <CheckBoxLineComponent label="Invert X axis" target={this.props.block} propertyName="invertX" onValueChanged={() => this.props.globalState.onRebuildRequiredObservable.notifyObservers()} />
                     <CheckBoxLineComponent label="Invert Y axis" target={this.props.block} propertyName="invertY" onValueChanged={() => this.props.globalState.onRebuildRequiredObservable.notifyObservers()}/>                    

nodeEditor/src/diagram/properties/clampNodePropertyComponent.tsx

@@ -1,11 +1,10 @@
 
 import * as React from "react";
 import { LineContainerComponent } from '../../sharedComponents/lineContainerComponent';
-import { TextInputLineComponent } from '../../sharedComponents/textInputLineComponent';
-import { TextLineComponent } from '../../sharedComponents/textLineComponent';
 import { FloatLineComponent } from '../../sharedComponents/floatLineComponent';
 import { IPropertyComponentProps } from './propertyComponentProps';
 import { ClampBlock } from 'babylonjs/Materials/Node/Blocks/clampBlock';
+import { GenericPropertyTabComponent } from './genericNodePropertyComponent';
 
 export class ClampPropertyTabComponent extends React.Component<IPropertyComponentProps> {
 
@@ -23,10 +22,7 @@ export class ClampPropertyTabComponent extends React.Component<IPropertyComponen
       
         return (
             <div>
-                <LineContainerComponent title="GENERAL">
-                    <TextInputLineComponent globalState={this.props.globalState} label="Name" propertyName="name" target={clampBlock} onChange={() => this.props.globalState.onUpdateRequiredObservable.notifyObservers()} />
-                    <TextLineComponent label="Type" value={clampBlock.getClassName()} />
-                </LineContainerComponent>
+                <GenericPropertyTabComponent globalState={this.props.globalState} block={this.props.block}/>
                 <LineContainerComponent title="PROPERTIES">
                   <FloatLineComponent label="Minimum" propertyName="minimum" target={clampBlock} onChange={() => this.forceRebuild()} />
                   <FloatLineComponent label="Maximum" propertyName="maximum" target={clampBlock} onChange={() => this.forceRebuild()} />

nodeEditor/src/diagram/properties/genericNodePropertyComponent.tsx

@@ -4,6 +4,7 @@ import { LineContainerComponent } from '../../sharedComponents/lineContainerComp
 import { IPropertyComponentProps } from './propertyComponentProps';
 import { TextInputLineComponent } from '../../sharedComponents/textInputLineComponent';
 import { TextLineComponent } from '../../sharedComponents/textLineComponent';
+import { InputBlock } from 'babylonjs';
 
 export class GenericPropertyTabComponent extends React.Component<IPropertyComponentProps> {
     constructor(props: IPropertyComponentProps) {
@@ -14,8 +15,14 @@ export class GenericPropertyTabComponent extends React.Component<IPropertyCompon
         return (
             <>
                 <LineContainerComponent title="GENERAL">
-                    <TextInputLineComponent globalState={this.props.globalState} label="Name" propertyName="name" target={this.props.block} onChange={() => this.props.globalState.onUpdateRequiredObservable.notifyObservers()} />
+                    {
+                        (!this.props.block.isInput || !(this.props.block as InputBlock).isAttribute) &&
+                        <TextInputLineComponent globalState={this.props.globalState} label="Name" propertyName="name" target={this.props.block} 
+                            onChange={() => this.props.globalState.onUpdateRequiredObservable.notifyObservers()} />
+                    }
                     <TextLineComponent label="Type" value={this.props.block.getClassName()} />
+                    <TextInputLineComponent globalState={this.props.globalState} label="Comments" propertyName="comments" target={this.props.block} 
+                            onChange={() => this.props.globalState.onUpdateRequiredObservable.notifyObservers()} />
                 </LineContainerComponent>         
             </>
         );

nodeEditor/src/diagram/properties/gradientNodePropertyComponent.tsx

@@ -1,13 +1,12 @@
 
 import * as React from "react";
 import { LineContainerComponent } from '../../sharedComponents/lineContainerComponent';
-import { TextInputLineComponent } from '../../sharedComponents/textInputLineComponent';
-import { TextLineComponent } from '../../sharedComponents/textLineComponent';
 import { GradientBlockColorStep, GradientBlock } from 'babylonjs/Materials/Node/Blocks/gradientBlock';
 import { GradientStepComponent } from './gradientStepComponent';
 import { ButtonLineComponent } from '../../sharedComponents/buttonLineComponent';
 import { Color3 } from 'babylonjs/Maths/math.color';
 import { IPropertyComponentProps } from './propertyComponentProps';
+import { GenericPropertyTabComponent } from './genericNodePropertyComponent';
 
 export class GradientPropertyTabComponent extends React.Component<IPropertyComponentProps> {
 
@@ -47,10 +46,7 @@ export class GradientPropertyTabComponent extends React.Component<IPropertyCompo
       
         return (
             <div>
-                <LineContainerComponent title="GENERAL">
-                    <TextInputLineComponent globalState={this.props.globalState} label="Name" propertyName="name" target={gradientBlock} onChange={() => this.props.globalState.onUpdateRequiredObservable.notifyObservers()} />
-                    <TextLineComponent label="Type" value={gradientBlock.getClassName()} />
-                </LineContainerComponent>
+                <GenericPropertyTabComponent globalState={this.props.globalState} block={this.props.block}/>
                 <LineContainerComponent title="STEPS">
                     <ButtonLineComponent label="Add new step" onClick={() => this.addNewStep()} />
                     {

nodeEditor/src/diagram/properties/inputNodePropertyComponent.tsx

@@ -10,15 +10,13 @@ import { Vector3PropertyTabComponent } from '../../components/propertyTab/proper
 import { Vector4PropertyTabComponent } from '../../components/propertyTab/properties/vector4PropertyTabComponent';
 import { MatrixPropertyTabComponent } from '../../components/propertyTab/properties/matrixPropertyTabComponent';
 import { LineContainerComponent } from '../../sharedComponents/lineContainerComponent';
-import { TextInputLineComponent } from '../../sharedComponents/textInputLineComponent';
-import { TextLineComponent } from '../../sharedComponents/textLineComponent';
 import { OptionsLineComponent } from '../../sharedComponents/optionsLineComponent';
 import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/Enums/nodeMaterialBlockConnectionPointTypes';
 import { NodeMaterialSystemValues } from 'babylonjs/Materials/Node/Enums/nodeMaterialSystemValues';
 import { AnimatedInputBlockTypes } from 'babylonjs/Materials/Node/Blocks/Input/animatedInputBlockTypes';
-import { StringTools } from '../../stringTools';
 import { IPropertyComponentProps } from './propertyComponentProps';
 import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
+import { GenericPropertyTabComponent } from './genericNodePropertyComponent';
 
 export class InputPropertyTabComponent extends React.Component<IPropertyComponentProps> {
     constructor(props: IPropertyComponentProps) {
@@ -164,13 +162,7 @@ export class InputPropertyTabComponent extends React.Component<IPropertyComponen
 
         return (
             <div>
-                <LineContainerComponent title="GENERAL">
-                    {
-                        !inputBlock.isAttribute &&
-                        <TextInputLineComponent  globalState={this.props.globalState} label="Name" propertyName="name" target={inputBlock} onChange={() => this.props.globalState.onUpdateRequiredObservable.notifyObservers()} />
-                    }
-                    <TextLineComponent label="Type" value={StringTools.GetBaseType(inputBlock.type)} />
-                </LineContainerComponent>
+                <GenericPropertyTabComponent globalState={this.props.globalState} block={this.props.block}/>
                 <LineContainerComponent title="PROPERTIES">
                     {
                         inputBlock.isUniform && !inputBlock.isSystemValue && inputBlock.animationType === AnimatedInputBlockTypes.None &&

nodeEditor/src/diagram/properties/lightInformationPropertyTabComponent.tsx

@@ -1,11 +1,10 @@
 
 import * as React from "react";
-import { TextLineComponent } from '../../sharedComponents/textLineComponent';
 import { LineContainerComponent } from '../../sharedComponents/lineContainerComponent';
-import { TextInputLineComponent } from '../../sharedComponents/textInputLineComponent';
 import { OptionsLineComponent } from '../../sharedComponents/optionsLineComponent';
 import { IPropertyComponentProps } from './propertyComponentProps';
 import { LightInformationBlock } from 'babylonjs/Materials/Node/Blocks/Vertex/lightInformationBlock';
+import { GenericPropertyTabComponent } from './genericNodePropertyComponent';
 
 export class LightInformationPropertyTabComponent extends React.Component<IPropertyComponentProps> {
 
@@ -18,12 +17,8 @@ export class LightInformationPropertyTabComponent extends React.Component<IPrope
         let lightInformationBlock = this.props.block as LightInformationBlock;
 
         return (
-            <div>
-                <LineContainerComponent title="GENERAL">
-                    <TextLineComponent label="Type" value="LightInformationBlock" />
-                    <TextInputLineComponent globalState={this.props.globalState} label="Name" propertyName="name" target={lightInformationBlock} onChange={() => this.props.globalState.onUpdateRequiredObservable.notifyObservers()} />
-                </LineContainerComponent>
-
+            <div>               
+                <GenericPropertyTabComponent globalState={this.props.globalState} block={this.props.block}/>
                 <LineContainerComponent title="PROPERTIES">
                     <OptionsLineComponent label="Light" noDirectUpdate={true} valuesAreStrings={true} options={lightOptions} target={lightInformationBlock} propertyName="name" onSelect={(name: any) => {
                         lightInformationBlock.light = scene.getLightByName(name);

nodeEditor/src/diagram/properties/lightPropertyTabComponent.tsx

@@ -1,11 +1,10 @@
 
 import * as React from "react";
-import { TextLineComponent } from '../../sharedComponents/textLineComponent';
 import { LineContainerComponent } from '../../sharedComponents/lineContainerComponent';
-import { TextInputLineComponent } from '../../sharedComponents/textInputLineComponent';
 import { OptionsLineComponent } from '../../sharedComponents/optionsLineComponent';
 import { IPropertyComponentProps } from './propertyComponentProps';
 import { LightBlock } from 'babylonjs/Materials/Node/Blocks/Dual/lightBlock';
+import { GenericPropertyTabComponent } from './genericNodePropertyComponent';
 
 export class LightPropertyTabComponent extends React.Component<IPropertyComponentProps> {
 
@@ -20,12 +19,8 @@ export class LightPropertyTabComponent extends React.Component<IPropertyComponen
         let lightBlock = this.props.block as LightBlock;
 
         return (
-            <div>
-                <LineContainerComponent title="GENERAL">
-                    <TextLineComponent label="Type" value="LightBlock" />
-                    <TextInputLineComponent globalState={this.props.globalState} label="Name" propertyName="name" target={lightBlock} onChange={() => this.props.globalState.onUpdateRequiredObservable.notifyObservers()} />
-                </LineContainerComponent>
-
+            <div>                
+                <GenericPropertyTabComponent globalState={this.props.globalState} block={this.props.block}/>
                 <LineContainerComponent title="PROPERTIES">
                     <OptionsLineComponent label="Light" defaultIfNull={0} noDirectUpdate={true} valuesAreStrings={true} options={lightOptions} target={lightBlock} propertyName="name" onSelect={(name: any) => {
                         if (name === "") {

nodeEditor/src/diagram/properties/remapNodePropertyComponent.tsx

@@ -2,10 +2,9 @@
 import * as React from "react";
 import { LineContainerComponent } from '../../sharedComponents/lineContainerComponent';
 import { Vector2LineComponent } from '../../sharedComponents/vector2LineComponent';
-import { TextInputLineComponent } from '../../sharedComponents/textInputLineComponent';
-import { TextLineComponent } from '../../sharedComponents/textLineComponent';
 import { IPropertyComponentProps } from './propertyComponentProps';
 import { RemapBlock } from 'babylonjs/Materials/Node/Blocks/remapBlock';
+import { GenericPropertyTabComponent } from './genericNodePropertyComponent';
 
 export class RemapPropertyTabComponent extends React.Component<IPropertyComponentProps> {
 
@@ -22,11 +21,8 @@ export class RemapPropertyTabComponent extends React.Component<IPropertyComponen
         let remapBlock = this.props.block as RemapBlock;
       
         return (
-            <div>
-                <LineContainerComponent title="GENERAL">
-                    <TextInputLineComponent globalState={this.props.globalState} label="Name" propertyName="name" target={remapBlock} onChange={() => this.props.globalState.onUpdateRequiredObservable.notifyObservers()} />
-                    <TextLineComponent label="Type" value={remapBlock.getClassName()} />
-                </LineContainerComponent>
+            <div>                
+                <GenericPropertyTabComponent globalState={this.props.globalState} block={this.props.block}/>
                 <LineContainerComponent title="PROPERTIES">
                   <Vector2LineComponent label="From" propertyName="sourceRange" target={remapBlock} onChange={() => this.forceRebuild()} />
                   <Vector2LineComponent label="To" propertyName="targetRange" target={remapBlock} onChange={() => this.forceRebuild()} />

nodeEditor/src/diagram/properties/texturePropertyTabComponent.tsx

@@ -3,7 +3,6 @@ import * as React from "react";
 import { BaseTexture } from 'babylonjs/Materials/Textures/baseTexture';
 import { FileButtonLineComponent } from '../../sharedComponents/fileButtonLineComponent';
 import { Tools } from 'babylonjs/Misc/tools';
-import { TextLineComponent } from '../../sharedComponents/textLineComponent';
 import { LineContainerComponent } from '../../sharedComponents/lineContainerComponent';
 import { TextInputLineComponent } from '../../sharedComponents/textInputLineComponent';
 import { CheckBoxLineComponent } from '../../sharedComponents/checkBoxLineComponent';
@@ -16,6 +15,7 @@ import { OptionsLineComponent } from '../../sharedComponents/optionsLineComponen
 import { IPropertyComponentProps } from './propertyComponentProps';
 import { ReflectionTextureBlock } from 'babylonjs/Materials/Node/Blocks/Dual/reflectionTextureBlock';
 import { TextureBlock } from 'babylonjs/Materials/Node/Blocks/Dual/textureBlock';
+import { GenericPropertyTabComponent } from './genericNodePropertyComponent';
 
 export class TexturePropertyTabComponent extends React.Component<IPropertyComponentProps, {isEmbedded: boolean, loadAsCubeTexture: boolean}> {
 
@@ -176,11 +176,8 @@ export class TexturePropertyTabComponent extends React.Component<IPropertyCompon
         ];
         
         return (
-            <div>
-                <LineContainerComponent title="GENERAL">
-                    <TextLineComponent label="Type" value={this.props.block.getClassName()} />
-                    <TextInputLineComponent globalState={this.props.globalState} label="Name" propertyName="name" target={this.props.block} onChange={() => this.props.globalState.onUpdateRequiredObservable.notifyObservers()} />
-                </LineContainerComponent>
+            <div>                
+                <GenericPropertyTabComponent globalState={this.props.globalState} block={this.props.block}/>
                 <LineContainerComponent title="PROPERTIES">
                     <CheckBoxLineComponent label="Auto select UV" propertyName="autoSelectUV" target={this.props.block} onValueChanged={() => {                        
                         this.props.globalState.onUpdateRequiredObservable.notifyObservers();

nodeEditor/src/diagram/properties/transformNodePropertyComponent.tsx

@@ -4,8 +4,7 @@ import { LineContainerComponent } from '../../sharedComponents/lineContainerComp
 import { IPropertyComponentProps } from './propertyComponentProps';
 import { CheckBoxLineComponent } from '../../sharedComponents/checkBoxLineComponent';
 import { TransformBlock } from 'babylonjs/Materials/Node/Blocks/transformBlock';
-import { TextInputLineComponent } from '../../sharedComponents/textInputLineComponent';
-import { TextLineComponent } from '../../sharedComponents/textLineComponent';
+import { GenericPropertyTabComponent } from './genericNodePropertyComponent';
 
 export class TransformPropertyTabComponent extends React.Component<IPropertyComponentProps> {
     constructor(props: IPropertyComponentProps) {
@@ -14,11 +13,8 @@ export class TransformPropertyTabComponent extends React.Component<IPropertyComp
 
     render() {
         return (
-            <>
-                <LineContainerComponent title="GENERAL">
-                    <TextInputLineComponent globalState={this.props.globalState} label="Name" propertyName="name" target={this.props.block} onChange={() => this.props.globalState.onUpdateRequiredObservable.notifyObservers()} />
-                    <TextLineComponent label="Type" value={this.props.block.getClassName()} />
-                </LineContainerComponent>
+            <>                
+                <GenericPropertyTabComponent globalState={this.props.globalState} block={this.props.block}/>
                 <LineContainerComponent title="PROPERTIES">
                     <CheckBoxLineComponent label="Transform as direction" onSelect={value => {
                         let transformBlock = this.props.block as TransformBlock;

nodeEditor/src/diagram/properties/trigonometryNodePropertyComponent.tsx

@@ -1,11 +1,10 @@
 
 import * as React from "react";
-import { TextLineComponent } from '../../sharedComponents/textLineComponent';
 import { LineContainerComponent } from '../../sharedComponents/lineContainerComponent';
-import { TextInputLineComponent } from '../../sharedComponents/textInputLineComponent';
 import { OptionsLineComponent } from '../../sharedComponents/optionsLineComponent';
 import { TrigonometryBlockOperations, TrigonometryBlock } from 'babylonjs/Materials/Node/Blocks/trigonometryBlock';
 import { IPropertyComponentProps } from './propertyComponentProps';
+import { GenericPropertyTabComponent } from './genericNodePropertyComponent';
 
 export class TrigonometryPropertyTabComponent extends React.Component<IPropertyComponentProps> {
 
@@ -41,13 +40,8 @@ export class TrigonometryPropertyTabComponent extends React.Component<IPropertyC
         })
         
         return (
-            <div>
-                <LineContainerComponent title="GENERAL">
-                    <TextInputLineComponent globalState={this.props.globalState} label="Name" propertyName="name" target={trigonometryBlock} onChange={() => {
-                        this.props.globalState.onUpdateRequiredObservable.notifyObservers();
-                    }} />
-                    <TextLineComponent label="Type" value={trigonometryBlock.getClassName()} />
-                </LineContainerComponent>
+            <div>                
+                <GenericPropertyTabComponent globalState={this.props.globalState} block={this.props.block}/>
                 <LineContainerComponent title="PROPERTIES">  
                     <OptionsLineComponent label="Operation" options={operationOptions} target={trigonometryBlock} propertyName="operation" onSelect={(value: any) => {
                         this.forceUpdate();

nodeEditor/src/diagram/properties/worleyNoise3DNodePropertyComponent.tsx

@@ -3,8 +3,7 @@ import * as React from "react";
 import { LineContainerComponent } from '../../sharedComponents/lineContainerComponent';
 import { IPropertyComponentProps } from './propertyComponentProps';
 import { CheckBoxLineComponent } from '../../sharedComponents/checkBoxLineComponent';
-import { TextInputLineComponent } from '../../sharedComponents/textInputLineComponent';
-import { TextLineComponent } from '../../sharedComponents/textLineComponent';
+import { GenericPropertyTabComponent } from './genericNodePropertyComponent';
 
 export class WorleyNoise3DNodePropertyComponent extends React.Component<IPropertyComponentProps> {
     constructor(props: IPropertyComponentProps) {
@@ -14,10 +13,7 @@ export class WorleyNoise3DNodePropertyComponent extends React.Component<IPropert
     render() {
         return (
             <>
-                <LineContainerComponent title="GENERAL">
-                    <TextInputLineComponent globalState={this.props.globalState} label="Name" propertyName="name" target={this.props.block} onChange={() => this.props.globalState.onUpdateRequiredObservable.notifyObservers()} />
-                    <TextLineComponent label="Type" value={this.props.block.getClassName()} />
-                </LineContainerComponent>
+                <GenericPropertyTabComponent globalState={this.props.globalState} block={this.props.block}/>
                 <LineContainerComponent title="PROPERTIES">
                     <CheckBoxLineComponent label="Use Manhattan Distance" target={this.props.block} propertyName="manhattanDistance" onValueChanged={() => this.props.globalState.onRebuildRequiredObservable.notifyObservers()} />              
                 </LineContainerComponent>        

nodeEditor/src/graphEditor.tsx

@@ -146,7 +146,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
         }
 
         this.props.globalState.hostDocument!.addEventListener("keydown", evt => {
-            if (evt.keyCode === 46) { // Delete                
+            if (evt.keyCode === 46 && !this.props.globalState.blockKeyboardEvents) { // Delete                
                 let selectedItems = this._graphCanvas.selectedNodes;
 
                 for (var selectedItem of selectedItems) {

src/Materials/Node/nodeMaterialBlock.ts

@@ -46,6 +46,11 @@ export class NodeMaterialBlock {
     public uniqueId: number;
 
     /**
+     * Gets or sets the comments associated with this block
+     */
+    public comments: string = "";    
+
+    /**
      * Gets a boolean indicating that this block can only be used once per NodeMaterial
      */
     public get isUnique() {
@@ -641,6 +646,7 @@ export class NodeMaterialBlock {
         serializationObject.customType = "BABYLON." + this.getClassName();
         serializationObject.id = this.uniqueId;
         serializationObject.name = this.name;
+        serializationObject.comments = this.comments;
 
         serializationObject.inputs = [];
 
@@ -654,6 +660,7 @@ export class NodeMaterialBlock {
     /** @hidden */
     public _deserialize(serializationObject: any, scene: Scene, rootUrl: string) {
         this.name = serializationObject.name;
+        this.comments = serializationObject.comments;
     }
 
     /**