Fix several nme bugs (del key + normal support)

inspector/src/components/actionTabs/tabs/propertyGrids/materials/nodeMaterialPropertyGridComponent.tsx

@@ -74,18 +74,22 @@ export class NodeMaterialPropertyGridComponent extends React.Component<INodeMate
             case NodeMaterialBlockConnectionPointTypes.Float:
                     let cantDisplaySlider = (isNaN(block.min) || isNaN(block.max) || block.min === block.max);
                     return (
-                        <>
+                        <div key={block.name}>                            
                             {
-                                cantDisplaySlider &&
+                                block.isBoolean &&
+                                <CheckBoxLineComponent key={block.name} label={block.name} target={block} propertyName="value" onPropertyChangedObservable={this.props.onPropertyChangedObservable}/>
+                            }
+                            {
+                                !block.isBoolean && cantDisplaySlider &&
                                 <FloatLineComponent key={block.name} lockObject={this.props.lockObject} label={block.name} target={block} propertyName="value" 
                                     onPropertyChangedObservable={this.props.onPropertyChangedObservable}
                                 />
                             }        
                             {
-                                !cantDisplaySlider &&
+                                !block.isBoolean && !cantDisplaySlider &&
                                 <SliderLineComponent key={block.name} label={block.name} target={block} propertyName="value" step={(block.max - block.min) / 100.0} minimum={block.min} maximum={block.max} onPropertyChangedObservable={this.props.onPropertyChangedObservable}/>
                             }
-                        </>
+                        </div>
                     );  
             case NodeMaterialBlockConnectionPointTypes.Color3:
             case NodeMaterialBlockConnectionPointTypes.Color4:

nodeEditor/src/components/propertyTab/properties/color3PropertyTabComponent.tsx

@@ -13,7 +13,7 @@ export class Color3PropertyTabComponent extends React.Component<IColor3PropertyT
 
     render() {
         return (
-            <Color3LineComponent label="Value" target={this.props.inputBlock} propertyName="value" onChange={() => {
+            <Color3LineComponent globalState={this.props.globalState} label="Value" target={this.props.inputBlock} propertyName="value" onChange={() => {
                 this.props.globalState.onUpdateRequiredObservable.notifyObservers();
             }}></Color3LineComponent>
         );

nodeEditor/src/components/propertyTab/properties/matrixPropertyTabComponent.tsx

@@ -13,7 +13,7 @@ export class MatrixPropertyTabComponent extends React.Component<IMatrixPropertyT
 
     render() {
         return (
-            <MatrixLineComponent label="Value" target={this.props.inputBlock} propertyName="value" onChange={() => {
+            <MatrixLineComponent globalState={this.props.globalState} label="Value" target={this.props.inputBlock} propertyName="value" onChange={() => {
                 this.props.globalState.onUpdateRequiredObservable.notifyObservers();
             }}
             mode={this.props.inputBlock.matrixMode}

nodeEditor/src/components/propertyTab/properties/vector2PropertyTabComponent.tsx

@@ -13,7 +13,7 @@ export class Vector2PropertyTabComponent extends React.Component<IVector2Propert
 
     render() {
         return (
-            <Vector2LineComponent label="Value" target={this.props.inputBlock} propertyName="value" onChange={() => {
+            <Vector2LineComponent globalState={this.props.globalState} label="Value" target={this.props.inputBlock} propertyName="value" onChange={() => {
                 this.props.globalState.onUpdateRequiredObservable.notifyObservers();
             }}></Vector2LineComponent>
         );

nodeEditor/src/components/propertyTab/properties/vector3PropertyTabComponent.tsx

@@ -13,7 +13,7 @@ export class Vector3PropertyTabComponent extends React.Component<IVector3Propert
 
     render() {
         return (
-            <Vector3LineComponent label="Value" target={this.props.inputBlock} propertyName="value" onChange={() => {
+            <Vector3LineComponent globalState={this.props.globalState} label="Value" target={this.props.inputBlock} propertyName="value" onChange={() => {
                 this.props.globalState.onUpdateRequiredObservable.notifyObservers();
             }}></Vector3LineComponent>
         );

nodeEditor/src/components/propertyTab/properties/vector4PropertyTabComponent.tsx

@@ -13,7 +13,7 @@ export class Vector4PropertyTabComponent extends React.Component<IVector4Propert
 
     render() {
         return (
-            <Vector4LineComponent label="Value" target={this.props.inputBlock} propertyName="value" onChange={() => {
+            <Vector4LineComponent globalState={this.props.globalState} label="Value" target={this.props.inputBlock} propertyName="value" onChange={() => {
                 this.props.globalState.onUpdateRequiredObservable.notifyObservers();
             }}></Vector4LineComponent>
         );

nodeEditor/src/diagram/properties/framePropertyComponent.tsx

@@ -45,7 +45,7 @@ export class FramePropertyTabComponent extends React.Component<IFramePropertyTab
             <div>
                 <LineContainerComponent title="GENERAL">
                     <TextInputLineComponent globalState={this.props.globalState} label="Name" propertyName="name" target={this.props.frame} />
-                    <Color3LineComponent label="Color" target={this.props.frame} propertyName="color"></Color3LineComponent>
+                    <Color3LineComponent globalState={this.props.globalState} label="Color" target={this.props.frame} propertyName="color"></Color3LineComponent>
                     {
                         !this.props.frame.isCollapsed &&
                         <ButtonLineComponent label="Collapse" onClick={() => {

nodeEditor/src/diagram/properties/remapNodePropertyComponent.tsx

@@ -24,8 +24,8 @@ export class RemapPropertyTabComponent extends React.Component<IPropertyComponen
             <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()} />
+                  <Vector2LineComponent globalState={this.props.globalState} label="From" propertyName="sourceRange" target={remapBlock} onChange={() => this.forceRebuild()} />
+                  <Vector2LineComponent globalState={this.props.globalState} label="To" propertyName="targetRange" target={remapBlock} onChange={() => this.forceRebuild()} />
                 </LineContainerComponent>
             </div>
         );

nodeEditor/src/sharedComponents/color3LineComponent.tsx

@@ -5,6 +5,7 @@ import { PropertyChangedEvent } from "./propertyChangedEvent";
 import { NumericInputComponent } from "./numericInputComponent";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faMinus, faPlus, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { GlobalState } from '../globalState';
 
 export interface IColor3LineComponentProps {
     label: string;
@@ -12,6 +13,7 @@ export interface IColor3LineComponentProps {
     propertyName: string;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     onChange?: () => void;
+    globalState: GlobalState;
 }
 
 export class Color3LineComponent extends React.Component<IColor3LineComponentProps, { isExpanded: boolean, color: Color3 }> {
@@ -152,9 +154,9 @@ export class Color3LineComponent extends React.Component<IColor3LineComponentPro
                 {
                     this.state.isExpanded &&
                     <div className="secondLine">
-                        <NumericInputComponent label="r" value={this.state.color.r} onChange={value => this.updateStateR(value)} />
-                        <NumericInputComponent label="g" value={this.state.color.g} onChange={value => this.updateStateG(value)} />
-                        <NumericInputComponent label="b" value={this.state.color.b} onChange={value => this.updateStateB(value)} />
+                        <NumericInputComponent globalState={this.props.globalState} label="r" value={this.state.color.r} onChange={value => this.updateStateR(value)} />
+                        <NumericInputComponent globalState={this.props.globalState} label="g" value={this.state.color.g} onChange={value => this.updateStateG(value)} />
+                        <NumericInputComponent globalState={this.props.globalState} label="b" value={this.state.color.b} onChange={value => this.updateStateB(value)} />
                     </div>
                 }
             </div>

nodeEditor/src/sharedComponents/matrixLineComponent.tsx

@@ -5,6 +5,7 @@ import { PropertyChangedEvent } from "./propertyChangedEvent";
 import { Vector4LineComponent } from './vector4LineComponent';
 import { OptionsLineComponent } from './optionsLineComponent';
 import { SliderLineComponent } from './sliderLineComponent';
+import { GlobalState } from '../globalState';
 
 interface IMatrixLineComponentProps {
     label: string;
@@ -15,6 +16,7 @@ interface IMatrixLineComponentProps {
     onModeChange?: (mode: number) => void;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     mode?: number;
+    globalState: GlobalState;
 }
 
 export class MatrixLineComponent extends React.Component<IMatrixLineComponentProps, { value: Matrix, mode: number, angle: number}> {
@@ -151,10 +153,10 @@ export class MatrixLineComponent extends React.Component<IMatrixLineComponentPro
                 {
                     this.state.mode === 0 &&
                     <div className="secondLine">
-                        <Vector4LineComponent label="Row #0" value={this.state.value.getRow(0)!} onChange={value => this.updateRow(value, 0)}/>
-                        <Vector4LineComponent label="Row #1" value={this.state.value.getRow(1)!} onChange={value => this.updateRow(value, 1)}/>
-                        <Vector4LineComponent label="Row #2" value={this.state.value.getRow(2)!} onChange={value => this.updateRow(value, 2)}/>
-                        <Vector4LineComponent label="Row #3" value={this.state.value.getRow(3)!} onChange={value => this.updateRow(value, 3)}/>
+                        <Vector4LineComponent globalState={this.props.globalState} label="Row #0" value={this.state.value.getRow(0)!} onChange={value => this.updateRow(value, 0)}/>
+                        <Vector4LineComponent globalState={this.props.globalState} label="Row #1" value={this.state.value.getRow(1)!} onChange={value => this.updateRow(value, 1)}/>
+                        <Vector4LineComponent globalState={this.props.globalState} label="Row #2" value={this.state.value.getRow(2)!} onChange={value => this.updateRow(value, 2)}/>
+                        <Vector4LineComponent globalState={this.props.globalState} label="Row #3" value={this.state.value.getRow(3)!} onChange={value => this.updateRow(value, 3)}/>
                     </div>
                 }
                 {

nodeEditor/src/sharedComponents/numericInputComponent.tsx

@@ -1,10 +1,12 @@
 import * as React from "react";
+import { GlobalState } from '../globalState';
 
 interface INumericInputComponentProps {
     label: string;
     value: number;
     step?: number;
     onChange: (value: number) => void;
+    globalState: GlobalState;
 }
 
 export class NumericInputComponent extends React.Component<INumericInputComponentProps, { value: string }> {
@@ -62,7 +64,12 @@ export class NumericInputComponent extends React.Component<INumericInputComponen
                         {`${this.props.label}: `}
                     </div>
                 }
-                <input type="number" step={this.props.step} className="numeric-input" value={this.state.value} onChange={evt => this.updateValue(evt)} />
+                <input type="number" 
+                    onFocus={() => this.props.globalState.blockKeyboardEvents = true}
+                    onBlur={evt => {
+                        this.props.globalState.blockKeyboardEvents = false;
+                    }}
+                    step={this.props.step} className="numeric-input" value={this.state.value} onChange={evt => this.updateValue(evt)} />
             </div>
         )
     }

nodeEditor/src/sharedComponents/vector2LineComponent.tsx

@@ -6,6 +6,7 @@ import { NumericInputComponent } from "./numericInputComponent";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { PropertyChangedEvent } from "./propertyChangedEvent";
+import { GlobalState } from '../globalState';
 
 interface IVector2LineComponentProps {
     label: string;
@@ -14,6 +15,7 @@ interface IVector2LineComponentProps {
     step?: number;
     onChange?: (newvalue: Vector2) => void;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    globalState: GlobalState;
 }
 
 export class Vector2LineComponent extends React.Component<IVector2LineComponentProps, { isExpanded: boolean, value: Vector2 }> {
@@ -104,8 +106,8 @@ export class Vector2LineComponent extends React.Component<IVector2LineComponentP
                 {
                     this.state.isExpanded &&
                     <div className="secondLine">
-                        <NumericInputComponent label="x" step={this.props.step} value={this.state.value.x} onChange={value => this.updateStateX(value)} />
-                        <NumericInputComponent label="y" step={this.props.step} value={this.state.value.y} onChange={value => this.updateStateY(value)} />
+                        <NumericInputComponent globalState={this.props.globalState} label="x" step={this.props.step} value={this.state.value.x} onChange={value => this.updateStateX(value)} />
+                        <NumericInputComponent globalState={this.props.globalState} label="y" step={this.props.step} value={this.state.value.y} onChange={value => this.updateStateY(value)} />
                     </div>
                 }
             </div>

nodeEditor/src/sharedComponents/vector3LineComponent.tsx

@@ -6,6 +6,7 @@ import { NumericInputComponent } from "./numericInputComponent";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { PropertyChangedEvent } from "./propertyChangedEvent";
+import { GlobalState } from '../globalState';
 
 interface IVector3LineComponentProps {
     label: string;
@@ -14,6 +15,7 @@ interface IVector3LineComponentProps {
     step?: number;
     onChange?: (newvalue: Vector3) => void;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    globalState: GlobalState;
 }
 
 export class Vector3LineComponent extends React.Component<IVector3LineComponentProps, { isExpanded: boolean, value: Vector3 }> {
@@ -113,9 +115,9 @@ export class Vector3LineComponent extends React.Component<IVector3LineComponentP
                 {
                     this.state.isExpanded &&
                     <div className="secondLine">
-                        <NumericInputComponent label="x" step={this.props.step} value={this.state.value.x} onChange={value => this.updateStateX(value)} />
-                        <NumericInputComponent label="y" step={this.props.step} value={this.state.value.y} onChange={value => this.updateStateY(value)} />
-                        <NumericInputComponent label="z" step={this.props.step} value={this.state.value.z} onChange={value => this.updateStateZ(value)} />
+                        <NumericInputComponent globalState={this.props.globalState} label="x" step={this.props.step} value={this.state.value.x} onChange={value => this.updateStateX(value)} />
+                        <NumericInputComponent globalState={this.props.globalState} label="y" step={this.props.step} value={this.state.value.y} onChange={value => this.updateStateY(value)} />
+                        <NumericInputComponent globalState={this.props.globalState} label="z" step={this.props.step} value={this.state.value.z} onChange={value => this.updateStateZ(value)} />
                     </div>
                 }
             </div>

nodeEditor/src/sharedComponents/vector4LineComponent.tsx

@@ -6,6 +6,7 @@ import { NumericInputComponent } from "./numericInputComponent";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { PropertyChangedEvent } from "./propertyChangedEvent";
+import { GlobalState } from '../globalState';
 
 interface IVector4LineComponentProps {
     label: string;
@@ -15,6 +16,7 @@ interface IVector4LineComponentProps {
     step?: number;
     onChange?: (newvalue: Vector4) => void;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    globalState: GlobalState;
 }
 
 export class Vector4LineComponent extends React.Component<IVector4LineComponentProps, { isExpanded: boolean, value: Vector4 }> {
@@ -125,10 +127,10 @@ export class Vector4LineComponent extends React.Component<IVector4LineComponentP
                 {
                     this.state.isExpanded &&
                     <div className="secondLine">
-                        <NumericInputComponent label="x" step={this.props.step} value={this.state.value.x} onChange={value => this.updateStateX(value)} />
-                        <NumericInputComponent label="y" step={this.props.step} value={this.state.value.y} onChange={value => this.updateStateY(value)} />
-                        <NumericInputComponent label="z" step={this.props.step} value={this.state.value.z} onChange={value => this.updateStateZ(value)} />
-                        <NumericInputComponent label="w" step={this.props.step} value={this.state.value.w} onChange={value => this.updateStateW(value)} />
+                        <NumericInputComponent globalState={this.props.globalState} label="x" step={this.props.step} value={this.state.value.x} onChange={value => this.updateStateX(value)} />
+                        <NumericInputComponent globalState={this.props.globalState} label="y" step={this.props.step} value={this.state.value.y} onChange={value => this.updateStateY(value)} />
+                        <NumericInputComponent globalState={this.props.globalState} label="z" step={this.props.step} value={this.state.value.z} onChange={value => this.updateStateZ(value)} />
+                        <NumericInputComponent globalState={this.props.globalState} label="w" step={this.props.step} value={this.state.value.w} onChange={value => this.updateStateW(value)} />
                     </div>
                 }
             </div>

src/Materials/Node/nodeMaterial.ts

@@ -28,6 +28,7 @@ import { SerializationHelper } from '../../Misc/decorators';
 import { TextureBlock } from './Blocks/Dual/textureBlock';
 import { ReflectionTextureBlock } from './Blocks/Dual/reflectionTextureBlock';
 import { EffectFallbacks } from '../effectFallbacks';
+import { WebRequest } from '../../Misc/webRequest';
 
 // declare NODEEDITOR namespace for compilation issue
 declare var NODEEDITOR: any;
@@ -43,6 +44,10 @@ export interface INodeMaterialEditorOptions {
 
 /** @hidden */
 export class NodeMaterialDefines extends MaterialDefines implements IImageProcessingConfigurationDefines {
+    public NORMAL = false;
+    public TANGENT = false;
+    public UV1 = false;
+
     /** BONES */
     public NUM_BONE_INFLUENCERS = 0;
     public BonesPerMesh = 0;
@@ -114,9 +119,12 @@ export class NodeMaterial extends PushMaterial {
     private _optimizers = new Array<NodeMaterialOptimizer>();
     private _animationFrame = -1;
 
-    /** Define the URl to load node editor script */
+    /** Define the Url to load node editor script */
     public static EditorURL = `https://unpkg.com/babylonjs-node-editor@${Engine.Version}/babylon.nodeEditor.js`;
 
+    /** Define the Url to load snippets */
+    public static SnippetUrl = "https://snippet.babylonjs.com";
+
     private BJSNODEMATERIALEDITOR = this._getGlobalNodeMaterialEditor();
 
     /** Get the inspector from bundle or global */
@@ -1293,6 +1301,41 @@ export class NodeMaterial extends PushMaterial {
     }
 
     /**
+     * Creates a node material from a snippet saved by the node material editor
+     * @param snippetId defines the snippet to load
+     * @param scene defines the hosting scene
+     * @param rootUrl defines the root URL to use to load textures and relative dependencies
+     * @returns a promise that will resolve to the new node material
+     */
+    public static ParseFromSnippetAsync(snippetId: string, scene: Scene, rootUrl: string = ""): Promise<NodeMaterial> {
+        return new Promise((resolve, reject) => {
+            var request = new WebRequest();
+            request.addEventListener("readystatechange", () => {
+                if (request.readyState == 4) {
+                    if (request.status == 200) {
+                        var snippet = JSON.parse(JSON.parse(request.responseText).jsonPayload);
+                        let serializationObject = JSON.parse(snippet.nodeMaterial);
+                        let nodeMaterial = SerializationHelper.Parse(() => new NodeMaterial(snippetId, scene), serializationObject, scene, rootUrl);
+
+                        nodeMaterial.loadFromSerialization(serializationObject);
+                        try {
+                            nodeMaterial.build(true);
+                            resolve(nodeMaterial);
+                        } catch (err) {
+                            reject(err);
+                        }
+                    } else {
+                        reject("Unable to load the snippet " + snippetId);
+                    }
+                }
+            });
+
+            request.open("GET", this.SnippetUrl + "/" + snippetId.replace("#", "/"));
+            request.send();
+        });
+    }
+
+    /**
      * Creates a new node material set to default basic configuration
      * @param name defines the name of the material
      * @param scene defines the hosting scene