Associated with #6012

dist/preview release/packagesSizeBaseLine.json

@@ -1 +1 @@
-{"engineOnly":251951,"sceneOnly":509990,"minGridMaterial":638895,"minStandardMaterial":764906}
+{"engineOnly":252069,"sceneOnly":510108,"minGridMaterial":639017,"minStandardMaterial":765028}

nodeEditor/src/components/diagram/defaultNodeModel.ts

@@ -63,7 +63,7 @@ export class DefaultNodeModel extends NodeModel {
                 } else {
                     model.addAll(link);
                 }
-            } else {
+            } else if (!connection.isUndefined) {
                 // Create value node for the connection
                 var type = ""
                 if (connection.type == NodeMaterialBlockConnectionPointTypes.Texture) {

nodeEditor/src/components/diagram/light/lightPropertyTabComponent.tsx

@@ -20,6 +20,8 @@ export class LightPropertyTabComponent extends React.Component<ILightPropertyTab
             return { label: l.name, value: l.name }
         });
 
+        lightOptions.splice(0, 0, { label: "All", value: "" })
+
         return (
             <div>
                 <LineContainerComponent title="GENERAL">
@@ -28,8 +30,12 @@ export class LightPropertyTabComponent extends React.Component<ILightPropertyTab
                 </LineContainerComponent>
 
                 <LineContainerComponent title="PROPERTIES">
-                    <OptionsLineComponent label="Light" noDirectUpdate={true} valuesAreStrings={true} options={lightOptions} target={this.props.node.light} propertyName="name" onSelect={(name: any) => {
-                        this.props.node.light = scene.getLightByName(name);
+                    <OptionsLineComponent label="Light" defaultIfNull={0} noDirectUpdate={true} valuesAreStrings={true} options={lightOptions} target={this.props.node.light} propertyName="name" onSelect={(name: any) => {
+                        if (name === "") {
+                            this.props.node.light = null;
+                        } else {
+                            this.props.node.light = scene.getLightByName(name);
+                        }
                         this.forceUpdate();
                         this.props.globalState.onRebuildRequiredObservable.notifyObservers();
                     }} />

nodeEditor/src/components/log/log.scss

@@ -1,9 +1,11 @@
 #log-console {
     background: #333333;
-    height: 100px;
+    border: #555555 solid 1px;
+    height: 120px;
+    box-sizing: border-box;
     margin: 0;
     padding: 10px;
-    width: calc(100% - 20px); 
+    width: 100%; 
     overflow: hidden;
     overflow-y: auto;
 
@@ -11,5 +13,9 @@
         color: white;
         font-size: 14px;
         font-family: 'Courier New', Courier, monospace;
+
+        &.error {
+            color:red;
+        }
     }
 }

nodeEditor/src/components/log/logComponent.tsx

@@ -9,7 +9,13 @@ interface ILogComponentProps {
     globalState: GlobalState;
 }
 
-export class LogComponent extends React.Component<ILogComponentProps, { logs: string[] }> {
+export class LogEntry {
+    constructor(public message: string, public isError: boolean) {
+
+    }
+}
+
+export class LogComponent extends React.Component<ILogComponentProps, { logs: LogEntry[] }> {
 
     constructor(props: ILogComponentProps) {
         super(props);
@@ -20,7 +26,7 @@ export class LogComponent extends React.Component<ILogComponentProps, { logs: st
     componentWillMount() {
         this.props.globalState.onLogRequiredObservable.add(log => {
             let currentLogs = this.state.logs;
-            currentLogs.push(...log.split("\r\n"));
+            currentLogs.push(log);
 
             this.setState({ logs: currentLogs });
         });
@@ -41,8 +47,8 @@ export class LogComponent extends React.Component<ILogComponentProps, { logs: st
                 {
                     this.state.logs.map((l, i) => {
                         return (
-                            <div key={i} className="log">
-                                {l}
+                            <div key={i} className={"log" + (l.isError ? " error" : "")}>
+                                {l.message}
                             </div>
                         )
                     })

nodeEditor/src/components/nodeList/nodeList.scss

@@ -4,7 +4,7 @@
     margin: 0;
     padding: 0;
     display: grid;
-    width: 200px; 
+    width: 100%; 
     overflow: hidden;
 
     .pane {

nodeEditor/src/globalState.ts

@@ -2,6 +2,7 @@ import { NodeMaterial } from "babylonjs/Materials/Node/nodeMaterial"
 import { Nullable } from "babylonjs/types"
 import { Observable } from 'babylonjs/Misc/observable';
 import { DefaultNodeModel } from './components/diagram/defaultNodeModel';
+import { LogEntry } from './components/log/logComponent';
 
 export class GlobalState {
     nodeMaterial?: NodeMaterial;
@@ -12,5 +13,5 @@ export class GlobalState {
     onResetRequiredObservable = new Observable<void>();
     onUpdateRequiredObservable = new Observable<void>();
     onZoomToFitRequiredObservable = new Observable<void>();
-    onLogRequiredObservable = new Observable<string>();
+    onLogRequiredObservable = new Observable<LogEntry>();
 }

nodeEditor/src/graphEditor.tsx

@@ -24,7 +24,7 @@ import { InputNodeFactory } from './components/diagram/input/inputNodeFactory';
 import { InputNodeModel } from './components/diagram/input/inputNodeModel';
 import { TextureBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/textureBlock';
 import { Vector2, Vector3, Vector4, Matrix, Color3, Color4 } from 'babylonjs/Maths/math';
-import { LogComponent } from './components/log/logComponent';
+import { LogComponent, LogEntry } from './components/log/logComponent';
 import { LightBlock } from 'babylonjs/Materials/Node/Blocks/Dual/lightBlock';
 import { LightNodeModel } from './components/diagram/light/lightNodeModel';
 import { LightNodeFactory } from './components/diagram/light/lightNodeFactory';
@@ -179,10 +179,10 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
 
         try {
             this.props.globalState.nodeMaterial.build(true);
-            this.props.globalState.onLogRequiredObservable.notifyObservers("Node material build successful");
+            this.props.globalState.onLogRequiredObservable.notifyObservers(new LogEntry("Node material build successful", false));
         }
         catch (err) {
-            this.props.globalState.onLogRequiredObservable.notifyObservers(err);
+            this.props.globalState.onLogRequiredObservable.notifyObservers(new LogEntry(err, true));
         }
     }
 

nodeEditor/src/sharedComponents/optionsLineComponent.tsx

@@ -17,15 +17,20 @@ interface IOptionsLineComponentProps {
     onSelect?: (value: number | string) => void,
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>,
     valuesAreStrings?: boolean
+    defaultIfNull?: number
 }
 
 export class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, { value: number | string }> {
     private _localChange = false;
 
+    private _getValue(props: IOptionsLineComponentProps) {
+        return props.target ? props.target[props.propertyName] : props.options[props.defaultIfNull || 0];
+    }
+
     constructor(props: IOptionsLineComponentProps) {
         super(props);
 
-        this.state = { value: props.target[props.propertyName] };
+        this.state = { value: this._getValue(props) };
     }
 
     shouldComponentUpdate(nextProps: IOptionsLineComponentProps, nextState: { value: number }) {
@@ -34,7 +39,7 @@ export class OptionsLineComponent extends React.Component<IOptionsLineComponentP
             return true;
         }
 
-        const newValue = nextProps.target[nextProps.propertyName];
+        const newValue = this._getValue(nextProps);
         if (newValue != null && newValue !== nextState.value) {
             nextState.value = newValue;
             return true;