Associated with #6012

Playground/babylon.d.txt

@@ -53444,11 +53444,11 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
-     * Block used to get the opposite of a value
+     * Block used to get the opposite (1 - x) of a value
      */
-    export class OppositeBlock extends NodeMaterialBlock {
+    export class OneMinusBlock extends NodeMaterialBlock {
         /**
-         * Creates a new OppositeBlock
+         * Creates a new OneMinusBlock
          * @param name defines the block name
          */
         constructor(name: string);

dist/preview release/babylon.d.ts

@@ -54279,11 +54279,11 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
-     * Block used to get the opposite of a value
+     * Block used to get the opposite (1 - x) of a value
      */
-    export class OppositeBlock extends NodeMaterialBlock {
+    export class OneMinusBlock extends NodeMaterialBlock {
         /**
-         * Creates a new OppositeBlock
+         * Creates a new OneMinusBlock
          * @param name defines the block name
          */
         constructor(name: string);

dist/preview release/babylon.module.d.ts

@@ -56906,16 +56906,16 @@ declare module "babylonjs/Materials/Node/Blocks/stepBlock" {
         protected _buildBlock(state: NodeMaterialBuildState): this;
     }
 }
-declare module "babylonjs/Materials/Node/Blocks/oppositeBlock" {
+declare module "babylonjs/Materials/Node/Blocks/oneMinusBlock" {
     import { NodeMaterialBlock } from "babylonjs/Materials/Node/nodeMaterialBlock";
     import { NodeMaterialBuildState } from "babylonjs/Materials/Node/nodeMaterialBuildState";
     import { NodeMaterialConnectionPoint } from "babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint";
     /**
-     * Block used to get the opposite of a value
+     * Block used to get the opposite (1 - x) of a value
      */
-    export class OppositeBlock extends NodeMaterialBlock {
+    export class OneMinusBlock extends NodeMaterialBlock {
         /**
-         * Creates a new OppositeBlock
+         * Creates a new OneMinusBlock
          * @param name defines the block name
          */
         constructor(name: string);
@@ -57102,7 +57102,7 @@ declare module "babylonjs/Materials/Node/Blocks/index" {
     export * from "babylonjs/Materials/Node/Blocks/divideBlock";
     export * from "babylonjs/Materials/Node/Blocks/subtractBlock";
     export * from "babylonjs/Materials/Node/Blocks/stepBlock";
-    export * from "babylonjs/Materials/Node/Blocks/oppositeBlock";
+    export * from "babylonjs/Materials/Node/Blocks/oneMinusBlock";
     export * from "babylonjs/Materials/Node/Blocks/viewDirectionBlock";
     export * from "babylonjs/Materials/Node/Blocks/fresnelBlock";
     export * from "babylonjs/Materials/Node/Blocks/maxBlock";
@@ -119864,11 +119864,11 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
-     * Block used to get the opposite of a value
+     * Block used to get the opposite (1 - x) of a value
      */
-    export class OppositeBlock extends NodeMaterialBlock {
+    export class OneMinusBlock extends NodeMaterialBlock {
         /**
-         * Creates a new OppositeBlock
+         * Creates a new OneMinusBlock
          * @param name defines the block name
          */
         constructor(name: string);

dist/preview release/documentation.d.ts

@@ -54279,11 +54279,11 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
-     * Block used to get the opposite of a value
+     * Block used to get the opposite (1 - x) of a value
      */
-    export class OppositeBlock extends NodeMaterialBlock {
+    export class OneMinusBlock extends NodeMaterialBlock {
         /**
-         * Creates a new OppositeBlock
+         * Creates a new OneMinusBlock
          * @param name defines the block name
          */
         constructor(name: string);

dist/preview release/viewer/babylon.module.d.ts

@@ -56906,16 +56906,16 @@ declare module "babylonjs/Materials/Node/Blocks/stepBlock" {
         protected _buildBlock(state: NodeMaterialBuildState): this;
     }
 }
-declare module "babylonjs/Materials/Node/Blocks/oppositeBlock" {
+declare module "babylonjs/Materials/Node/Blocks/oneMinusBlock" {
     import { NodeMaterialBlock } from "babylonjs/Materials/Node/nodeMaterialBlock";
     import { NodeMaterialBuildState } from "babylonjs/Materials/Node/nodeMaterialBuildState";
     import { NodeMaterialConnectionPoint } from "babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint";
     /**
-     * Block used to get the opposite of a value
+     * Block used to get the opposite (1 - x) of a value
      */
-    export class OppositeBlock extends NodeMaterialBlock {
+    export class OneMinusBlock extends NodeMaterialBlock {
         /**
-         * Creates a new OppositeBlock
+         * Creates a new OneMinusBlock
          * @param name defines the block name
          */
         constructor(name: string);
@@ -57102,7 +57102,7 @@ declare module "babylonjs/Materials/Node/Blocks/index" {
     export * from "babylonjs/Materials/Node/Blocks/divideBlock";
     export * from "babylonjs/Materials/Node/Blocks/subtractBlock";
     export * from "babylonjs/Materials/Node/Blocks/stepBlock";
-    export * from "babylonjs/Materials/Node/Blocks/oppositeBlock";
+    export * from "babylonjs/Materials/Node/Blocks/oneMinusBlock";
     export * from "babylonjs/Materials/Node/Blocks/viewDirectionBlock";
     export * from "babylonjs/Materials/Node/Blocks/fresnelBlock";
     export * from "babylonjs/Materials/Node/Blocks/maxBlock";
@@ -119864,11 +119864,11 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
-     * Block used to get the opposite of a value
+     * Block used to get the opposite (1 - x) of a value
      */
-    export class OppositeBlock extends NodeMaterialBlock {
+    export class OneMinusBlock extends NodeMaterialBlock {
         /**
-         * Creates a new OppositeBlock
+         * Creates a new OneMinusBlock
          * @param name defines the block name
          */
         constructor(name: string);

nodeEditor/public/index.js

@@ -107,7 +107,8 @@ var showEditor = function() {
 if (BABYLON.Engine.isSupported()) {
     var canvas = document.createElement("canvas");
     var engine = new BABYLON.Engine(canvas, false, {disableWebGL2Support: true});
-    var scene = new BABYLON.Scene(engine);
+    var scene = new BABYLON.Scene(engine);    
+    var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
 
     nodeMaterial = new BABYLON.NodeMaterial("node");
 

nodeEditor/src/blockTools.ts

@@ -32,7 +32,7 @@ import { StepBlock } from 'babylonjs/Materials/Node/Blocks/stepBlock';
 import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
 import { NodeMaterialSystemValues } from 'babylonjs/Materials/Node/nodeMaterialSystemValues';
 import { AnimatedInputBlockTypes } from 'babylonjs/Materials/Node/Blocks/Input/animatedInputBlockTypes';
-import { OppositeBlock } from 'babylonjs/Materials/Node/Blocks/oppositeBlock';
+import { OneMinusBlock } from 'babylonjs/Materials/Node/Blocks/oneMinusBlock';
 import { ViewDirectionBlock } from 'babylonjs/Materials/Node/Blocks/viewDirectionBlock';
 import { LightInformationBlock } from 'babylonjs/Materials/Node/Blocks/Vertex/lightInformationBlock';
 import { MaxBlock } from 'babylonjs/Materials/Node/Blocks/maxBlock';
@@ -102,8 +102,8 @@ export class BlockTools {
                 return new SubtractBlock("Subtract"); 
             case "StepBlock":
                 return new StepBlock("Step");        
-            case "OppositeBlock":
-                return new OppositeBlock("Opposite");      
+            case "OneMinusBlock":
+                return new OneMinusBlock("One minus");      
             case "ViewDirectionBlock":
                 return new ViewDirectionBlock("View direction");    
             case "LightInformationBlock":

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

@@ -15,6 +15,8 @@ import { StringTools } from '../../../stringTools';
 import { AnimatedInputBlockTypes } from 'babylonjs/Materials/Node/Blocks/Input/animatedInputBlockTypes';
 import { TextInputLineComponent } from '../../../sharedComponents/textInputLineComponent';
 import { CheckBoxLineComponent } from '../../../sharedComponents/checkBoxLineComponent';
+import { Vector4PropertyTabComponent } from '../../propertyTab/properties/vector4PropertyTabComponent';
+import { MatrixPropertyTabComponent } from '../../propertyTab/properties/matrixPropertyTabComponent';
 
 interface IInputPropertyTabComponentProps {
     globalState: GlobalState;
@@ -46,7 +48,15 @@ export class InputPropertyTabComponentProps extends React.Component<IInputProper
             case NodeMaterialBlockConnectionPointTypes.Vector3:
                 return (
                     <Vector3PropertyTabComponent globalState={globalState} inputBlock={inputBlock} />
+                );            
+            case NodeMaterialBlockConnectionPointTypes.Vector4:
+                return (
+                    <Vector4PropertyTabComponent globalState={globalState} inputBlock={inputBlock} />
                 );
+            case NodeMaterialBlockConnectionPointTypes.Matrix:
+                return (
+                    <MatrixPropertyTabComponent globalState={globalState} inputBlock={inputBlock} />
+                );                
         }
 
         return null;

nodeEditor/src/components/nodeList/nodeListComponent.tsx

@@ -26,7 +26,7 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
         // Block types used to create the menu from
         const allBlocks = {
             Animation: ["BonesBlock", "MorphTargetsBlock"],
-            Basic_Math: ["AddBlock",  "DivideBlock", "MultiplyBlock", "ScaleBlock", "SubtractBlock", "OppositeBlock", "MaxBlock", "MinBlock"],
+            Basic_Math: ["AddBlock",  "DivideBlock", "MultiplyBlock", "ScaleBlock", "SubtractBlock", "OneMinusBlock", "MaxBlock", "MinBlock"],
             Conversion_Blocks: ["ColorMergerBlock", "ColorSplitterBlock", "VectorMergerBlock", "VectorSplitterBlock"],
             Inputs: ["Float", "Vector2", "Vector3", "Vector4", "Color3", "Color4", "TextureBlock", "TimeBlock"],
             Interpolation: ["LerpBlock"],

nodeEditor/src/components/preview/previewAreaComponent.tsx

@@ -0,0 +1,54 @@
+
+import * as React from "react";
+import { GlobalState } from '../../globalState';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPlay, faStop, faPalette } from '@fortawesome/free-solid-svg-icons';
+import { Color3, Color4 } from 'babylonjs/Maths/math.color';
+import { DataStorage } from '../../dataStorage';
+
+interface IPreviewAreaComponent {
+    globalState: GlobalState;
+    width: number;
+}
+
+export class PreviewAreaComponent extends React.Component<IPreviewAreaComponent> {
+
+    changeAnimation() {
+        this.props.globalState.rotatePreview = !this.props.globalState.rotatePreview;
+        this.props.globalState.onPreviewCommandActivated.notifyObservers();
+        this.forceUpdate();
+    }
+
+    changeBackground(value: string) {
+        const newColor = Color3.FromHexString(value);
+
+        DataStorage.StoreNumber("BackgroundColorR", newColor.r);
+        DataStorage.StoreNumber("BackgroundColorG", newColor.g);
+        DataStorage.StoreNumber("BackgroundColorB", newColor.b);
+
+        this.props.globalState.backgroundColor = Color4.FromColor3(newColor, 1.0);
+        this.props.globalState.onPreviewCommandActivated.notifyObservers();
+    }
+
+    render() {
+        return (
+            <>
+                <div id="preview" style={{height: this.props.width + "px"}}>
+                    <canvas id="preview-canvas"/>
+                </div>                
+                <div id="preview-config-bar">
+                    <div onClick={() => this.changeAnimation()} className={"button"}>
+                        <FontAwesomeIcon icon={this.props.globalState.rotatePreview ? faStop : faPlay} />
+                    </div>
+                    <div className={"button align"}>
+                        <label htmlFor="color-picker" id="color-picker-label">
+                            <FontAwesomeIcon icon={faPalette} />
+                        </label>
+                        <input ref="color-picker" id="color-picker" type="color" onChange={evt => this.changeBackground(evt.target.value)} />
+                    </div>
+                </div>
+            </>
+        );
+
+    }
+}

nodeEditor/src/components/preview/previewManager.ts

@@ -9,11 +9,12 @@ import { Vector3 } from 'babylonjs/Maths/math.vector';
 import { HemisphericLight } from 'babylonjs/Lights/hemisphericLight';
 import { ArcRotateCamera } from 'babylonjs/Cameras/arcRotateCamera';
 import { PreviewMeshType } from './previewMeshType';
+import { Animation } from 'babylonjs/Animations/animation';
 
 export class PreviewManager {
     private _nodeMaterial: NodeMaterial;
     private _onBuildObserver: Nullable<Observer<NodeMaterial>>;    
-    private _onPreviewMeshTypeChangedObserver: Nullable<Observer<void>>;
+    private _onPreviewCommandActivatedObserver: Nullable<Observer<void>>;
     private _onUpdateRequiredObserver: Nullable<Observer<void>>;
     private _engine: Engine;
     private _scene: Scene;
@@ -21,7 +22,8 @@ export class PreviewManager {
     private _dummy: Mesh;
     private _camera: ArcRotateCamera;
     private _material: NodeMaterial;
-    private _globalState: GlobalState;    
+    private _globalState: GlobalState;   
+    private _currentType: number; 
 
     public constructor(targetCanvas: HTMLCanvasElement, globalState: GlobalState) {
         this._nodeMaterial = globalState.nodeMaterial;
@@ -32,7 +34,7 @@ export class PreviewManager {
             this._updatePreview(serializationObject);
         });
 
-        this._onPreviewMeshTypeChangedObserver = globalState.onPreviewMeshTypeChanged.add(() => {
+        this._onPreviewCommandActivatedObserver = globalState.onPreviewCommandActivated.add(() => {
             this._refreshPreviewMesh();
         });
 
@@ -64,28 +66,40 @@ export class PreviewManager {
     }
 
     private _refreshPreviewMesh() {    
-        if (this._dummy) {
-            this._dummy.dispose();
-        }
-        
-        switch (this._globalState.previewMeshType) {
-            case PreviewMeshType.Box:
-                this._dummy = Mesh.CreateBox("dummy-box", 2, this._scene);
-                break;
-            case PreviewMeshType.Sphere:
-                this._dummy = Mesh.CreateSphere("dummy-sphere", 32, 2, this._scene);
-                break;
-            case PreviewMeshType.Torus:
-                this._dummy = Mesh.CreateTorus("dummy-torus", 2, 0.5, 32, this._scene);
-                break;
-            case PreviewMeshType.Cylinder:
-                this._dummy = Mesh.CreateCylinder("dummy-cylinder", 2, 1, 1.2, 32, 1, this._scene);
-                break;                
-            case PreviewMeshType.Plane:
-                this._dummy = Mesh.CreateGround("dummy-plane", 2, 2, 128, this._scene);
-                break;                
+        this._scene.stopAllAnimations();
+
+        if (this._currentType !== this._globalState.previewMeshType) {
+
+            this._currentType = this._globalState.previewMeshType;
+            if (this._dummy) {
+                this._dummy.dispose();
             }
-        this._dummy.material = this._material;
+        
+            switch (this._globalState.previewMeshType) {
+                case PreviewMeshType.Box:
+                    this._dummy = Mesh.CreateBox("dummy-box", 2, this._scene);
+                    break;
+                case PreviewMeshType.Sphere:
+                    this._dummy = Mesh.CreateSphere("dummy-sphere", 32, 2, this._scene);
+                    break;
+                case PreviewMeshType.Torus:
+                    this._dummy = Mesh.CreateTorus("dummy-torus", 2, 0.5, 32, this._scene);
+                    break;
+                case PreviewMeshType.Cylinder:
+                    this._dummy = Mesh.CreateCylinder("dummy-cylinder", 2, 1, 1.2, 32, 1, this._scene);
+                    break;                
+                case PreviewMeshType.Plane:
+                    this._dummy = Mesh.CreateGround("dummy-plane", 2, 2, 128, this._scene);
+                    break;                
+                }
+            this._dummy.material = this._material;
+        }
+
+        if (this._globalState.rotatePreview) {
+            Animation.CreateAndStartAnimation("turnTable", this._dummy, "rotation.y", 60, 360, this._dummy.rotation.y, this._dummy.rotation.y + 2 * Math.PI, 1);
+        }
+
+        this._scene.clearColor = this._globalState.backgroundColor;
     }
 
     private _updatePreview(serializationObject: any) {
@@ -100,7 +114,7 @@ export class PreviewManager {
 
     public dispose() {
         this._nodeMaterial.onBuildObservable.remove(this._onBuildObserver);
-        this._globalState.onPreviewMeshTypeChanged.remove(this._onPreviewMeshTypeChangedObserver);
+        this._globalState.onPreviewCommandActivated.remove(this._onPreviewCommandActivatedObserver);
         this._globalState.onUpdateRequiredObservable.remove(this._onUpdateRequiredObserver);
 
         if (this._material) {

nodeEditor/src/components/preview/previewMeshControlComponent.tsx

@@ -18,7 +18,7 @@ export class PreviewMeshControlComponent extends React.Component<IPreviewMeshCon
         }
 
         this.props.globalState.previewMeshType = newOne;
-        this.props.globalState.onPreviewMeshTypeChanged.notifyObservers();
+        this.props.globalState.onPreviewCommandActivated.notifyObservers();
 
         DataStorage.StoreNumber("PreviewMeshType", newOne);
 

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

@@ -0,0 +1,21 @@
+
+import * as React from "react";
+import { GlobalState } from '../../../globalState';
+import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
+import { MatrixLineComponent } from '../../../sharedComponents/matrixLineComponent';
+
+interface IMatrixPropertyTabComponentProps {
+    globalState: GlobalState;
+    inputBlock: InputBlock;
+}
+
+export class MatrixPropertyTabComponent extends React.Component<IMatrixPropertyTabComponentProps> {
+
+    render() {
+        return (
+            <MatrixLineComponent label="Value" target={this.props.inputBlock} propertyName="value" onChange={() => {
+                this.props.globalState.onUpdateRequiredObservable.notifyObservers();
+            }}></MatrixLineComponent>
+        );
+    }
+}

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

@@ -0,0 +1,21 @@
+
+import * as React from "react";
+import { GlobalState } from '../../../globalState';
+import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
+import { Vector4LineComponent } from '../../../sharedComponents/vector4LineComponent';
+
+interface IVector4PropertyTabComponentProps {
+    globalState: GlobalState;
+    inputBlock: InputBlock;
+}
+
+export class Vector4PropertyTabComponent extends React.Component<IVector4PropertyTabComponentProps> {
+
+    render() {
+        return (
+            <Vector4LineComponent label="Value" target={this.props.inputBlock} propertyName="value" onChange={() => {
+                this.props.globalState.onUpdateRequiredObservable.notifyObservers();
+            }}></Vector4LineComponent>
+        );
+    }
+}

nodeEditor/src/globalState.ts

@@ -8,6 +8,7 @@ import { INodeLocationInfo } from './nodeLocationInfo';
 import { NodeMaterialBlock } from 'babylonjs/Materials/Node/nodeMaterialBlock';
 import { PreviewMeshType } from './components/preview/previewMeshType';
 import { DataStorage } from './dataStorage';
+import { Color4 } from 'babylonjs/Maths/math.color';
 
 export class GlobalState {
     nodeMaterial: NodeMaterial;
@@ -21,14 +22,21 @@ export class GlobalState {
     onReOrganizedRequiredObservable = new Observable<void>();
     onLogRequiredObservable = new Observable<LogEntry>();
     onErrorMessageDialogRequiredObservable = new Observable<string>();
-    onPreviewMeshTypeChanged = new Observable<void>();
+    onPreviewCommandActivated = new Observable<void>();
     onGetNodeFromBlock: (block: NodeMaterialBlock) => NodeModel;
     previewMeshType: PreviewMeshType;
+    rotatePreview: boolean;
+    backgroundColor: Color4;
     blockKeyboardEvents = false;
     
     customSave?: {label: string, action: (data: string) => void};
 
     public constructor() {
         this.previewMeshType = DataStorage.ReadNumber("PreviewMeshType", PreviewMeshType.Box);
+
+        let r = DataStorage.ReadNumber("BackgroundColorR", 0.37);
+        let g = DataStorage.ReadNumber("BackgroundColorG", 0.37);
+        let b = DataStorage.ReadNumber("BackgroundColorB", 0.37);
+        this.backgroundColor = new Color4(r, g, b, 1.0);
     }
 }

nodeEditor/src/graphEditor.tsx

@@ -50,6 +50,7 @@ import { ClampBlock } from 'babylonjs/Materials/Node/Blocks/clampBlock';
 import { LightInformationNodeFactory } from './components/diagram/lightInformation/lightInformationNodeFactory';
 import { LightInformationNodeModel } from './components/diagram/lightInformation/lightInformationNodeModel';
 import { LightInformationBlock } from 'babylonjs/Materials/Node/Blocks/Vertex/lightInformationBlock';
+import { PreviewAreaComponent } from './components/preview/previewAreaComponent';
 
 require("storm-react-diagrams/dist/style.min.css");
 require("./main.scss");
@@ -674,9 +675,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
                     <div className="right-panel">
                         <PropertyTabComponent globalState={this.props.globalState} />
                         <PreviewMeshControlComponent globalState={this.props.globalState} />
-                        <div id="preview" style={{height: this._rightWidth + "px"}}>
-                            <canvas id="preview-canvas"/>
-                        </div>
+                        <PreviewAreaComponent globalState={this.props.globalState} width={this._rightWidth}/>
                     </div>
 
                     <LogComponent globalState={this.props.globalState} />

nodeEditor/src/main.scss

@@ -41,7 +41,7 @@
     grid-row: 1 / span 2;
     grid-column: 5;
     display: grid;
-    grid-template-rows: 1fr 30px auto;
+    grid-template-rows: 1fr 30px auto 30px;
     grid-template-columns: 100%;
     height: 100%;
     overflow-y: auto;
@@ -49,7 +49,27 @@
     #propertyTab {
         grid-row: 1;
         grid-column: 1;
-    }
+    }        
+    
+    .button {
+        display: grid;
+        justify-content: center;
+        align-content: center;
+        height: 30px;
+        width: calc(100% / 5);
+        cursor: pointer;
+
+        &:hover {
+            background: rgb(51, 122, 183);
+            color: white;
+            opacity: 0.8;
+        }
+
+        &.selected {
+            background: rgb(51, 122, 183);
+            color: white;
+        }
+    }    
 
     #preview-mesh-bar {
         grid-row: 2;
@@ -57,27 +77,36 @@
         display: flex;
         color: white;
         align-items: center;
-        font-size: 18px;
+        font-size: 18px;    
+    }
+
+    #preview-config-bar {
+        grid-row: 4;
+        grid-column: 1;
+        display: flex;
+        flex-direction: row-reverse;
+        color: white;
+        align-items: center;
+        font-size: 18px;    
 
         .button {
-            display: grid;
-            justify-content: center;
-            align-content: center;
-            height: 30px;
-            width: calc(100% / 4);
-            cursor: pointer;
-
-            &:hover {
-                background: rgb(51, 122, 183);
-                color: white;
-                opacity: 0.8;
-            }
+            width: 60px;
 
-            &.selected {
-                background: rgb(51, 122, 183);
-                color: white;
+            &.align {
+                justify-content: stretch;
+                text-align: center;
             }
-        }        
+        }
+
+        #color-picker {
+            display: none;
+        }
+
+        #color-picker-label {
+            width: 100%;
+            background: transparent;
+            cursor: pointer;            
+        }
     }
     
     #preview {

nodeEditor/src/sharedComponents/matrixLineComponent.tsx

@@ -0,0 +1,87 @@
+import * as React from "react";
+import { Vector3, Matrix, Vector4 } from "babylonjs/Maths/math";
+import { Observable } from "babylonjs/Misc/observable";
+import { PropertyChangedEvent } from "./propertyChangedEvent";
+import { Vector4LineComponent } from './vector4LineComponent';
+
+interface IMatrixLineComponentProps {
+    label: string;
+    target: any;
+    propertyName: string;
+    step?: number;
+    onChange?: (newValue: Matrix) => void;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+}
+
+export class MatrixLineComponent extends React.Component<IMatrixLineComponentProps, { value: Matrix}> {
+   private _localChange = false;
+
+    constructor(props: IMatrixLineComponentProps) {
+        super(props);
+
+        let matrix: Matrix = this.props.target[this.props.propertyName].clone();
+
+        this.state = { value:matrix }
+    }
+
+    shouldComponentUpdate(nextProps: IMatrixLineComponentProps, nextState: { value: Matrix }) {
+        const nextPropsValue = nextProps.target[nextProps.propertyName];
+
+        if (!nextPropsValue.equals(nextState.value) || this._localChange) {
+            nextState.value = nextPropsValue.clone();
+            this._localChange = false;
+            return true;
+        }
+        return false;
+    }
+
+    raiseOnPropertyChanged(previousValue: Vector3) {
+        if (this.props.onChange) {
+            this.props.onChange(this.state.value);
+        }
+
+        if (!this.props.onPropertyChangedObservable) {
+            return;
+        }
+        this.props.onPropertyChangedObservable.notifyObservers({
+            object: this.props.target,
+            property: this.props.propertyName,
+            value: this.state.value,
+            initialValue: previousValue
+        });
+    }
+
+    updateMatrix() {
+        const store = this.props.target[this.props.propertyName].clone();
+        this.props.target[this.props.propertyName] = this.state.value;
+
+        this.setState({ value: store });
+
+        this.raiseOnPropertyChanged(store);
+    }
+
+    updateRow(value: Vector4, row: number) {
+        this._localChange = true;
+
+        this.state.value.setRow(row, value);
+        this.updateMatrix();
+    }
+
+    render() {
+        return (
+            <div className="vector3Line">
+                <div className="firstLine">
+                    <div className="label">
+                        {this.props.label}
+                    </div>
+                </div>
+                <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)}/>
+                </div>
+            </div>
+        );
+    }
+}

nodeEditor/src/sharedComponents/vector4LineComponent.tsx

@@ -0,0 +1,137 @@
+import * as React from "react";
+import { Vector4 } from "babylonjs/Maths/math";
+import { Observable } from "babylonjs/Misc/observable";
+
+import { NumericInputComponent } from "./numericInputComponent";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { PropertyChangedEvent } from "./propertyChangedEvent";
+
+interface IVector4LineComponentProps {
+    label: string;
+    target?: any;
+    propertyName?: string;
+    value?: Vector4;
+    step?: number;
+    onChange?: (newvalue: Vector4) => void;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+}
+
+export class Vector4LineComponent extends React.Component<IVector4LineComponentProps, { isExpanded: boolean, value: Vector4 }> {
+
+    static defaultProps = {
+        step: 0.001, // cm
+    };
+
+    private _localChange = false;
+
+    constructor(props: IVector4LineComponentProps) {
+        super(props);
+
+        this.state = { isExpanded: false, value: (this.props.value || this.props.target[this.props.propertyName!]).clone() }
+    }
+
+    shouldComponentUpdate(nextProps: IVector4LineComponentProps, nextState: { isExpanded: boolean, value: Vector4 }) {
+        const nextPropsValue = nextProps.value || nextProps.target[nextProps.propertyName!];
+
+        if (!nextPropsValue.equals(nextState.value) || this._localChange) {
+            nextState.value = nextPropsValue.clone();
+            this._localChange = false;
+            return true;
+        }
+        return false;
+    }
+
+    switchExpandState() {
+        this._localChange = true;
+        this.setState({ isExpanded: !this.state.isExpanded });
+    }
+
+    raiseOnPropertyChanged(previousValue: Vector4) {
+        if (this.props.onChange) {
+            this.props.onChange(this.state.value);
+        }
+
+        if (!this.props.onPropertyChangedObservable || !this.props.propertyName) {
+            return;
+        }
+        this.props.onPropertyChangedObservable.notifyObservers({
+            object: this.props.target,
+            property: this.props.propertyName,
+            value: this.state.value,
+            initialValue: previousValue
+        });
+    }
+
+    updateVector4() {
+        const store = (this.props.value || this.props.target[this.props.propertyName!]).clone();
+        if (this.props.value) {
+            this.props.value.copyFrom(this.state.value);
+        } else {
+            this.props.target[this.props.propertyName!] = this.state.value;
+        }
+
+        this.forceUpdate();
+
+        this.raiseOnPropertyChanged(store);
+    }
+
+
+    updateStateX(value: number) {
+        this._localChange = true;
+
+        this.state.value.x = value;
+        this.updateVector4();
+    }
+
+    updateStateY(value: number) {
+        this._localChange = true;
+
+        this.state.value.y = value;
+        this.updateVector4();
+    }
+
+    updateStateZ(value: number) {
+        this._localChange = true;
+
+        this.state.value.z = value;
+        this.updateVector4();
+    }    
+    
+    updateStateW(value: number) {
+        this._localChange = true;
+
+        this.state.value.w = value;
+        this.updateVector4();
+    }
+
+    render() {
+        const chevron = this.state.isExpanded ? <FontAwesomeIcon icon={faMinus} /> : <FontAwesomeIcon icon={faPlus} />
+
+        return (
+            <div className="vector3Line">
+                <div className="firstLine">
+                    <div className="label">
+                        {this.props.label}
+                    </div>
+                    <div className="vector">
+                        {`X: ${this.state.value.x.toFixed(2)}, Y: ${this.state.value.y.toFixed(2)}, Z: ${this.state.value.z.toFixed(2)}, W: ${this.state.value.w.toFixed(2)}`}
+
+                    </div>
+                    <div className="expand hoverIcon" onClick={() => this.switchExpandState()} title="Expand">
+                        {chevron}
+                    </div>
+                </div>
+                {
+                    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)} />
+                    </div>
+                }
+            </div>
+        );
+    }
+}

src/Materials/Node/Blocks/index.ts

@@ -20,7 +20,7 @@ export * from "./lerpBlock";
 export * from "./divideBlock";
 export * from "./subtractBlock";
 export * from "./stepBlock";
-export * from "./oppositeBlock";
+export * from "./oneMinusBlock";
 export * from "./viewDirectionBlock";
 export * from "./fresnelBlock";
 export * from "./maxBlock";

src/Materials/Node/Blocks/oppositeBlock.ts

@@ -5,11 +5,11 @@ import { NodeMaterialConnectionPoint } from '../nodeMaterialBlockConnectionPoint
 import { NodeMaterialBlockTargets } from '../nodeMaterialBlockTargets';
 import { _TypeStore } from '../../../Misc/typeStore';
 /**
- * Block used to get the opposite of a value
+ * Block used to get the opposite (1 - x) of a value
  */
-export class OppositeBlock extends NodeMaterialBlock {
+export class OneMinusBlock extends NodeMaterialBlock {
     /**
-     * Creates a new OppositeBlock
+     * Creates a new OneMinusBlock
      * @param name defines the block name
      */
     public constructor(name: string) {
@@ -26,7 +26,7 @@ export class OppositeBlock extends NodeMaterialBlock {
      * @returns the class name
      */
     public getClassName() {
-        return "OppositeBlock";
+        return "OneMinusBlock";
     }
 
     /**
@@ -54,4 +54,4 @@ export class OppositeBlock extends NodeMaterialBlock {
     }
 }
 
-_TypeStore.RegisteredTypes["BABYLON.OppositeBlock"] = OppositeBlock;
+_TypeStore.RegisteredTypes["BABYLON.OneMinusBlock"] = OneMinusBlock;