Fix node material compilation

dist/preview release/packagesSizeBaseLine.json

@@ -1 +1 @@
-{"engineOnly":297300,"sceneOnly":507129,"minGridMaterial":634572,"minStandardMaterial":759970}
+{"engineOnly":297470,"sceneOnly":507299,"minGridMaterial":634742,"minStandardMaterial":760140}

nodeEditor/src/components/diagram/input/inputNodePropertyComponent.tsx

@@ -9,6 +9,7 @@ import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/
 import { OptionsLineComponent } from '../../../sharedComponents/optionsLineComponent';
 import { NodeMaterialWellKnownValues } from 'babylonjs/Materials/Node/nodeMaterialWellKnownValues';
 import { Vector2, Vector3, Matrix } from 'babylonjs/Maths/math';
+import { TextLineComponent } from '../../../sharedComponents/textLineComponent';
 
 interface IInputPropertyTabComponentProps {
     globalState: GlobalState;
@@ -93,7 +94,7 @@ export class InputPropertyTabComponentProps extends React.Component<IInputProper
 
         return (
             <div>
-                <h1>{getBaseType(connection.type)}</h1>
+                <TextLineComponent label="Type" value={getBaseType(connection.type)} />
                 <CheckBoxLineComponent label="Is mesh attribute" onSelect={value => {
                     connection!.isAttribute = value;
                     this.props.globalState.onRebuildRequiredObservable.notifyObservers();

nodeEditor/src/components/propertyTab/propertyTab.scss

@@ -1,8 +1,40 @@
 #propertyTab {
-    padding: 5px;
     $line-padding-left: 2px;
     color:white;
 
+      #header {
+        height: 30px;
+        font-size: 16px;
+        color: white;
+        background: #222222;
+        grid-row: 1;
+        text-align: center;
+        display: grid;
+        grid-template-columns: 30px 1fr 50px;        
+        -webkit-user-select: none; 
+        -moz-user-select: none;   
+        -ms-user-select: none;    
+        user-select: none;                
+
+        #logo {
+            position: relative;
+            grid-column: 1; 
+            width: 24px;
+            height: 24px;
+            left:0;
+            display: flex;
+            align-self: center;   
+            justify-self: center;
+        }        
+
+        #title {
+            grid-column: 2; 
+            display: grid;
+            align-items: center;   
+            text-align: center;
+        }
+    }
+
     .vector3Line {
         padding-left:$line-padding-left;                    
         display: grid;

nodeEditor/src/components/propertyTab/propertyTabComponent.tsx

@@ -27,13 +27,26 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
         if (this.state.currentNode) {
             return (
                 <div id="propertyTab">
+                    <div id="header">
+                        <img id="logo" src="https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" />
+                        <div id="title">
+                            NODE MATERIAL EDITOR
+                        </div>
+                    </div>
                     {this.state.currentNode.renderProperties(this.props.globalState)}
                 </div>
             );
         }
 
         return (
-            <div id="propertyTab" />
+            <div id="propertyTab">
+                <div id="header">
+                    <img id="logo" src="https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" />
+                    <div id="title">
+                        NODE MATERIAL EDITOR
+                    </div>
+                </div>
+            </div>
         );
     }
 }

nodeEditor/src/graphEditor.tsx

@@ -236,7 +236,6 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
         var outPort = new DefaultPortModel(type, "output");
 
         localNode.addPort(outPort);
-        this.forceUpdate();
 
         return localNode;
     }

src/Materials/effect.ts

@@ -328,7 +328,9 @@ export class Effect implements IDisposable {
         var vertexSource: any;
         var fragmentSource: any;
 
-        if (baseName.vertexElement) {
+        if (baseName.vertexSource) {
+            vertexSource = "source:" + baseName.vertexSource;
+        } else if (baseName.vertexElement) {
             vertexSource = document.getElementById(baseName.vertexElement);
 
             if (!vertexSource) {
@@ -338,7 +340,9 @@ export class Effect implements IDisposable {
             vertexSource = baseName.vertex || baseName;
         }
 
-        if (baseName.fragmentElement) {
+        if (baseName.fragmentSource) {
+            fragmentSource = "source:" + baseName.fragmentSource;
+        } else if (baseName.fragmentElement) {
             fragmentSource = document.getElementById(baseName.fragmentElement);
 
             if (!fragmentSource) {
@@ -534,6 +538,12 @@ export class Effect implements IDisposable {
             }
         }
 
+        // Direct source ?
+        if (vertex.substr(0, 7) === "source:") {
+            callback(vertex.substr(7));
+            return;
+        }
+
         // Base64 encoded ?
         if (vertex.substr(0, 7) === "base64:") {
             var vertexBinary = window.atob(vertex.substr(7));
@@ -570,6 +580,12 @@ export class Effect implements IDisposable {
             }
         }
 
+        // Direct source ?
+        if (fragment.substr(0, 7) === "source:") {
+            callback(fragment.substr(7));
+            return;
+        }
+
         // Base64 encoded ?
         if (fragment.substr(0, 7) === "base64:") {
             var fragmentBinary = window.atob(fragment.substr(7));