Associatewed with #6012

inspector/src/components/actionTabs/tabs/propertyGrids/fogPropertyGridComponent.tsx

@@ -20,7 +20,7 @@ export class FogPropertyGridComponent extends React.Component<IFogPropertyGridCo
 
     constructor(props: IFogPropertyGridComponentProps) {
         super(props);
-        this.state = { mode: 0 };
+        this.state = { mode: this.props.scene.fogMode };
     }
 
     render() {

nodeEditor/src/components/diagram/diagram.scss

@@ -36,6 +36,10 @@
         text-align: center;
         font-size: 20px;
         font-weight: bold;
+
+        .fullColor {
+            height: 100%;
+        }
     }
 
     .inputs {

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

@@ -36,13 +36,13 @@ export class InputPropertyTabComponentProps extends React.Component<IInputProper
                 return (
                     <Vector2PropertyTabComponent globalState={globalState} connection={connection} />
                 );
-            case NodeMaterialBlockConnectionPointTypes.Vector3:
             case NodeMaterialBlockConnectionPointTypes.Color3:
             case NodeMaterialBlockConnectionPointTypes.Color3OrColor4:
             case NodeMaterialBlockConnectionPointTypes.Color4:
                 return (
                     <Color3PropertyTabComponent globalState={globalState} connection={connection} />
                 );
+            case NodeMaterialBlockConnectionPointTypes.Vector3:
             case NodeMaterialBlockConnectionPointTypes.Vector3OrColor3:
                 return (
                     <Vector3PropertyTabComponent globalState={globalState} connection={connection} />
@@ -81,6 +81,7 @@ export class InputPropertyTabComponentProps extends React.Component<IInputProper
             { label: "View", value: NodeMaterialWellKnownValues.View },
             { label: "ViewxProjection", value: NodeMaterialWellKnownValues.ViewProjection },
             { label: "Projection", value: NodeMaterialWellKnownValues.Projection },
+            { label: "Camera position", value: NodeMaterialWellKnownValues.CameraPosition },
             { label: "Automatic", value: NodeMaterialWellKnownValues.Automatic },
         ];
 

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

@@ -5,6 +5,8 @@ import { Nullable } from 'babylonjs/types';
 import { GlobalState } from '../../../globalState';
 import { DefaultPortModel } from '../defaultPortModel';
 import { NodeMaterialWellKnownValues } from 'babylonjs/Materials/Node/nodeMaterialWellKnownValues';
+import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPointTypes';
+import { Color3 } from 'babylonjs/Maths/math';
 
 /**
  * GenericNodeWidgetProps
@@ -36,6 +38,34 @@ export class InputNodeWidget extends React.Component<InputNodeWidgetProps> {
         }
     }
 
+    renderValue(value: string) {
+        if (value) {
+            return (
+                <div>
+                    {value}
+                </div>
+            )
+        }
+
+        let connection = this.props.node!.connection;
+        if (!connection || !connection.isUniform) {
+            return null;
+        }
+
+        switch (connection.type) {
+            case NodeMaterialBlockConnectionPointTypes.Color3:
+            case NodeMaterialBlockConnectionPointTypes.Color3OrColor4:
+            case NodeMaterialBlockConnectionPointTypes.Color4: {
+                let color = connection.value as Color3;
+                return (
+                    <div className="fullColor" style={{ background: color.toHexString() }}></div>
+                )
+            }
+        }
+
+        return null;
+    }
+
     render() {
         var outputPorts = new Array<JSX.Element>()
         let port: DefaultPortModel;
@@ -83,6 +113,9 @@ export class InputNodeWidget extends React.Component<InputNodeWidgetProps> {
                     case NodeMaterialWellKnownValues.Projection:
                         value = "Projection";
                         break;
+                    case NodeMaterialWellKnownValues.CameraPosition:
+                        value = "Camera position";
+                        break;
                     case NodeMaterialWellKnownValues.Automatic:
                         value = "Automatic";
                         break;
@@ -101,7 +134,9 @@ export class InputNodeWidget extends React.Component<InputNodeWidgetProps> {
                     {outputPorts}
                 </div>
                 <div className="value">
-                    {value}
+                    {
+                        this.renderValue(value)
+                    }
                 </div>
             </div>
         );

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

@@ -0,0 +1,39 @@
+import * as SRD from "storm-react-diagrams";
+import { LightNodeWidget } from "./lightNodeWidget";
+import { LightNodeModel } from "./lightNodeModel";
+import * as React from "react";
+import { GlobalState } from '../../../globalState';
+
+/**
+ * Node factory which creates editor nodes
+ */
+export class LightNodeFactory extends SRD.AbstractNodeFactory {
+    private _globalState: GlobalState;
+
+	/**
+	 * Constructs a LightNodeFactory
+	 */
+    constructor(globalState: GlobalState) {
+        super("light");
+
+        this._globalState = globalState;
+    }
+
+	/**
+	 * Generates a node widget
+	 * @param diagramEngine diagram engine
+	 * @param node node to generate
+	 * @returns node widget jsx
+	 */
+    generateReactWidget(diagramEngine: SRD.DiagramEngine, node: LightNodeModel): JSX.Element {
+        return <LightNodeWidget node={node} globalState={this._globalState} />;
+    }
+
+	/**
+	 * Gets a new instance of a node model
+	 * @returns light node model
+	 */
+    getNewInstance() {
+        return new LightNodeModel();
+    }
+}

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

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { Nullable } from 'babylonjs/types';
+import { Light } from 'babylonjs/Lights/light';
+import { DefaultNodeModel } from '../defaultNodeModel';
+import { GlobalState } from '../../../globalState';
+import { LightPropertyTabComponent } from './lightPropertyTabComponent';
+import { NodeCreationOptions, GraphEditor } from '../../../graphEditor';
+import { DiagramModel } from 'storm-react-diagrams/dist/@types/src/models/DiagramModel';
+import { LightBlock } from 'babylonjs/Materials/Node/Blocks/Dual/lightBlock';
+
+/**
+ * Light node model which stores information about a node editor block
+ */
+export class LightNodeModel extends DefaultNodeModel {
+    private _block: LightBlock;
+
+	/**
+	 * Light for the node if it exists
+	 */
+    public get light(): Nullable<Light> {
+        return this._block.light.value;
+    }
+
+    public set light(value: Nullable<Light>) {
+        this._block.light.value = value;
+    }
+
+	/**
+	 * Constructs the node model
+	 */
+    constructor() {
+        super("light");
+    }
+
+    renderProperties(globalState: GlobalState) {
+        return (
+            <LightPropertyTabComponent globalState={globalState} node={this} />
+        );
+    }
+
+    prepare(options: NodeCreationOptions, nodes: Array<DefaultNodeModel>, model: DiagramModel, graphEditor: GraphEditor, filterInputs: string[]) {
+        this._block = options.nodeMaterialBlock as LightBlock;
+
+        super.prepare(options, nodes, model, graphEditor, filterInputs);
+    }
+
+}

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

@@ -0,0 +1,87 @@
+import * as React from "react";
+import { PortWidget } from "storm-react-diagrams";
+import { LightNodeModel } from './lightNodeModel';
+import { Nullable } from 'babylonjs/types';
+import { GlobalState } from '../../../globalState';
+import { DefaultPortModel } from '../defaultPortModel';
+
+/**
+ * GenericNodeWidgetProps
+ */
+export interface ILightNodeWidgetProps {
+    node: Nullable<LightNodeModel>;
+    globalState: GlobalState;
+}
+
+/**
+ * Used to display a node block for the node editor
+ */
+export class LightNodeWidget extends React.Component<ILightNodeWidgetProps> {
+	/**
+	 * Creates a GenericNodeWidget
+	 * @param props 
+	 */
+    constructor(props: ILightNodeWidgetProps) {
+        super(props);
+        this.state = {};
+
+        if (this.props.node) {
+            this.props.node.addListener({
+                selectionChanged: () => {
+                    let selected = (this.props.node as any).selected;
+                    this.props.globalState.onSelectionChangedObservable.notifyObservers(selected ? this.props.node : null);
+                }
+            });
+        }
+    }
+
+    render() {
+        var inputPorts = new Array<JSX.Element>();
+        var outputPorts = new Array<JSX.Element>();
+        if (this.props.node) {
+            // Input/Output ports
+            for (var key in this.props.node.ports) {
+                var port = this.props.node.ports[key] as DefaultPortModel;
+                if (port.position === "input") {
+                    if (port.name !== "light") {
+                        inputPorts.push(
+                            <div key={key} className="input-port">
+                                <div className="input-port-plug">
+                                    <PortWidget key={key} name={port.name} node={this.props.node} />
+                                </div>
+                                <div className="input-port-label">
+                                    {port.name}
+                                </div>
+                            </div>
+                        )
+                    }
+                } else {
+                    outputPorts.push(
+                        <div key={key} className="output-port">
+                            <div className="output-port-label">
+                                {port.name}
+                            </div>
+                            <div className="output-port-plug">
+                                <PortWidget key={key} name={port.name} node={this.props.node} />
+                            </div>
+                        </div>
+                    )
+                }
+            }
+        }
+
+        return (
+            <div className={"diagramBlock"}>
+                <div className="header">
+                    {this.props.node!.block!.name}
+                </div>
+                <div className="inputs">
+                    {inputPorts}
+                </div>
+                <div className="outputs">
+                    {outputPorts}
+                </div>
+            </div>
+        );
+    }
+}

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

@@ -0,0 +1,40 @@
+
+import * as React from "react";
+import { GlobalState } from '../../../globalState';
+import { LightNodeModel } from './lightNodeModel';
+import { TextLineComponent } from '../../../sharedComponents/textLineComponent';
+import { LineContainerComponent } from '../../../sharedComponents/lineContainerComponent';
+import { TextInputLineComponent } from '../../../sharedComponents/textInputLineComponent';
+import { OptionsLineComponent } from '../../../sharedComponents/optionsLineComponent';
+
+interface ILightPropertyTabComponentProps {
+    globalState: GlobalState;
+    node: LightNodeModel;
+}
+
+export class LightPropertyTabComponent extends React.Component<ILightPropertyTabComponentProps> {
+
+    render() {
+        let scene = this.props.globalState.nodeMaterial!.getScene();
+        var lightOptions = scene.lights.map(l => {
+            return { label: l.name, value: l.name }
+        });
+
+        return (
+            <div>
+                <LineContainerComponent title="GENERAL">
+                    <TextLineComponent label="Type" value="Light" />
+                    <TextInputLineComponent label="Name" propertyName="name" target={this.props.node.block!} onChange={() => this.props.globalState.onUpdateRequiredObservable.notifyObservers()} />
+                </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);
+                        this.forceUpdate();
+                        this.props.globalState.onRebuildRequiredObservable.notifyObservers();
+                    }} />
+                </LineContainerComponent>
+            </div>
+        );
+    }
+}

nodeEditor/src/components/diagram/texture/textureNodeWidget.tsx

@@ -9,7 +9,7 @@ import { DefaultPortModel } from '../defaultPortModel';
 /**
  * GenericNodeWidgetProps
  */
-export interface TextureNodeWidgetProps {
+export interface ITextureNodeWidgetProps {
     node: Nullable<TextureNodeModel>;
     globalState: GlobalState;
 }
@@ -17,12 +17,12 @@ export interface TextureNodeWidgetProps {
 /**
  * Used to display a node block for the node editor
  */
-export class TextureNodeWidget extends React.Component<TextureNodeWidgetProps> {
+export class TextureNodeWidget extends React.Component<ITextureNodeWidgetProps> {
 	/**
 	 * Creates a GenericNodeWidget
 	 * @param props 
 	 */
-    constructor(props: TextureNodeWidgetProps) {
+    constructor(props: ITextureNodeWidgetProps) {
         super(props);
         this.state = {};
 

nodeEditor/src/components/diagram/texture/texturePropertyTabComponent.tsx

@@ -59,8 +59,8 @@ export class TexturePropertyTabComponent extends React.Component<ITexturePropert
         return (
             <div>
                 <LineContainerComponent title="GENERAL">
-                    <TextInputLineComponent label="Name" propertyName="name" target={this.props.node.block!} onChange={() => this.props.globalState.onUpdateRequiredObservable.notifyObservers()} />
                     <TextLineComponent label="Type" value="Texture" />
+                    <TextInputLineComponent label="Name" propertyName="name" target={this.props.node.block!} onChange={() => this.props.globalState.onUpdateRequiredObservable.notifyObservers()} />
                 </LineContainerComponent>
 
                 <LineContainerComponent title="PROPERTIES">

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

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

nodeEditor/src/components/propertyTab/propertyTab.scss

@@ -54,7 +54,7 @@
             grid-column: 2;
             
             input {
-                width: 110px;
+                width: calc(100% - 5px);
             }
         }
     }

nodeEditor/src/graphEditor.tsx

@@ -25,6 +25,9 @@ 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 { LightBlock } from 'babylonjs';
+import { LightNodeModel } from './components/diagram/light/lightNodeModel';
+import { LightNodeFactory } from './components/diagram/light/lightNodeFactory';
 
 require("storm-react-diagrams/dist/style.min.css");
 require("./main.scss");
@@ -89,6 +92,11 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
             if (options.nodeMaterialBlock instanceof TextureBlock) {
                 newNode = new TextureNodeModel();
                 filterInputs.push("uv");
+            } else if (options.nodeMaterialBlock instanceof LightBlock) {
+                newNode = new LightNodeModel();
+                filterInputs.push("worldPosition");
+                filterInputs.push("worldNormal");
+                filterInputs.push("cameraPosition");
             } else {
                 newNode = new GenericNodeModel();
             }
@@ -135,6 +143,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
         this._engine.installDefaultFactories()
         this._engine.registerNodeFactory(new GenericNodeFactory(this.props.globalState));
         this._engine.registerNodeFactory(new TextureNodeFactory(this.props.globalState));
+        this._engine.registerNodeFactory(new LightNodeFactory(this.props.globalState));
         this._engine.registerNodeFactory(new InputNodeFactory(this.props.globalState));
 
         this.props.globalState.onRebuildRequiredObservable.add(() => {

nodeEditor/src/sharedComponents/color3LineComponent.tsx

@@ -11,6 +11,7 @@ export interface IColor3LineComponentProps {
     target: any;
     propertyName: string;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    onChange?: () => void;
 }
 
 export class Color3LineComponent extends React.Component<IColor3LineComponentProps, { isExpanded: boolean, color: Color3 }> {
@@ -48,6 +49,10 @@ export class Color3LineComponent extends React.Component<IColor3LineComponentPro
         this.props.target[this.props.propertyName] = newColor;
 
         this.setState({ color: newColor });
+
+        if (this.props.onChange) {
+            this.props.onChange();
+        }
     }
 
     switchExpandState() {
@@ -56,7 +61,6 @@ export class Color3LineComponent extends React.Component<IColor3LineComponentPro
     }
 
     raiseOnPropertyChanged(previousValue: Color3) {
-
         if (!this.props.onPropertyChangedObservable) {
             return;
         }

src/Materials/Node/Blocks/Dual/fogBlock.ts

@@ -109,8 +109,8 @@ export class FogBlock extends NodeMaterialBlock {
         }
 
         const scene = mesh.getScene();
-        effect.setColor3("fogColor", scene.fogColor);
-        effect.setFloat4("fogParameters", scene.fogMode, scene.fogStart, scene.fogEnd, scene.fogDensity);
+        effect.setColor3("u_fogColor", scene.fogColor);
+        effect.setFloat4("u_fogParameters", scene.fogMode, scene.fogStart, scene.fogEnd, scene.fogDensity);
     }
 
     protected _buildBlock(state: NodeMaterialBuildState) {