Associated with #6872

nodeEditor/src/components/propertyTab/propertyTabComponent.tsx

@@ -16,6 +16,14 @@ import { GraphFrame } from '../../diagram/graphFrame';
 import { TextLineComponent } from '../../sharedComponents/textLineComponent';
 import { Engine } from 'babylonjs/Engines/engine';
 import { FramePropertyTabComponent } from '../../diagram/properties/framePropertyComponent';
+import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
+import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/Enums/nodeMaterialBlockConnectionPointTypes';
+import { Color3LineComponent } from '../../sharedComponents/color3LineComponent';
+import { FloatLineComponent } from '../../sharedComponents/floatLineComponent';
+import { Color4LineComponent } from '../../sharedComponents/color4LineComponent';
+import { Vector2LineComponent } from '../../sharedComponents/vector2LineComponent';
+import { Vector3LineComponent } from '../../sharedComponents/vector3LineComponent';
+import { Vector4LineComponent } from '../../sharedComponents/vector4LineComponent';
 require("./propertyTab.scss");
 
 interface IPropertyTabComponentProps {
@@ -41,6 +49,72 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
         });
     }
 
+    processInputBlockUpdate(ib: InputBlock) {
+        this.props.globalState.onUpdateRequiredObservable.notifyObservers();
+
+        if (ib.isConstant) {
+            this.props.globalState.onRebuildRequiredObservable.notifyObservers();
+        }
+    }
+
+    renderInputBlock(block: InputBlock) {
+        switch (block.type) {
+            case NodeMaterialBlockConnectionPointTypes.Float:
+                    let cantDisplaySlider = (isNaN(block.min) || isNaN(block.max) || block.min === block.max);
+                    return (
+                        <div key={block.name}>                            
+                            {
+                                block.isBoolean &&
+                                <CheckBoxLineComponent key={block.name} label={block.name} target={block} propertyName="value" 
+                                onValueChanged={() => this.processInputBlockUpdate(block)}/>
+                            }
+                            {
+                                !block.isBoolean && cantDisplaySlider &&
+                                <FloatLineComponent key={block.name} label={block.name} target={block} propertyName="value" 
+                                onChange={() => this.processInputBlockUpdate(block)}/>
+                            }        
+                            {
+                                !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}
+                                onChange={() => this.processInputBlockUpdate(block)}/>
+                            }
+                        </div>
+                    );  
+            case NodeMaterialBlockConnectionPointTypes.Color3:
+                return (
+                    <Color3LineComponent globalState={this.props.globalState} key={block.name} label={block.name} target={block} 
+                        propertyName="value" 
+                        onChange={() => this.processInputBlockUpdate(block)}
+                    />
+                )     
+            case NodeMaterialBlockConnectionPointTypes.Color4:
+                return (
+                    <Color4LineComponent globalState={this.props.globalState} key={block.name} label={block.name} target={block} propertyName="value" 
+                    onChange={() => this.processInputBlockUpdate(block)}/>
+                )                         
+            case NodeMaterialBlockConnectionPointTypes.Vector2:
+                return (
+                        <Vector2LineComponent globalState={this.props.globalState} key={block.name} label={block.name} target={block} 
+                        propertyName="value" 
+                        onChange={() => this.processInputBlockUpdate(block)}/>
+                    )                                
+            case NodeMaterialBlockConnectionPointTypes.Vector3:
+                return (
+                    <Vector3LineComponent globalState={this.props.globalState} key={block.name} label={block.name} target={block} 
+                    propertyName="value" 
+                    onChange={() => this.processInputBlockUpdate(block)}/>
+                )
+            case NodeMaterialBlockConnectionPointTypes.Vector4:
+                return (
+                    <Vector4LineComponent globalState={this.props.globalState} key={block.name} label={block.name} target={block} 
+                    propertyName="value" 
+                    onChange={() => this.processInputBlockUpdate(block)}/>
+                )
+            }
+        return null;
+    }
+
     load(file: File) {
         Tools.ReadFile(file, (data) => {
             let decoder = new TextDecoder("utf-8");
@@ -152,6 +226,16 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
                         <ButtonLineComponent label="Export shaders" onClick={() => {
                             StringTools.DownloadAsFile(this.props.globalState.hostDocument, this.props.globalState.nodeMaterial!.compiledShaders, "shaders.txt");
                         }} />
+                    </LineContainerComponent>                    
+                    <LineContainerComponent title="INPUTS">   
+                    {
+                        this.props.globalState.nodeMaterial.getInputBlocks().map(ib => {
+                            if (!ib.isUniform) {
+                                return null;
+                            }
+                            return this.renderInputBlock(ib);
+                        })
+                    }
                     </LineContainerComponent>
                 </div>
             </div>