import * as React from "react"; import { Observable } from "babylonjs/Misc/observable"; import { NodeMaterial } from "babylonjs/Materials/Node/nodeMaterial"; import { PropertyChangedEvent } from "../../../../propertyChangedEvent"; import { LineContainerComponent } from "../../../lineContainerComponent"; import { CommonMaterialPropertyGridComponent } from "./commonMaterialPropertyGridComponent"; import { LockObject } from "../../../../../sharedUiComponents/tabs/propertyGrids/lockObject"; import { GlobalState } from '../../../../globalState'; import { ButtonLineComponent } from '../../../../../sharedUiComponents/lines/buttonLineComponent'; import { CheckBoxLineComponent } from '../../../../../sharedUiComponents/lines/checkBoxLineComponent'; import { FloatLineComponent } from '../../../../../sharedUiComponents/lines/floatLineComponent'; import { Color3LineComponent } from '../../../../../sharedUiComponents/lines/color3LineComponent'; import { Vector3LineComponent } from '../../../../../sharedUiComponents/lines/vector3LineComponent'; import { Vector4LineComponent } from '../../../../../sharedUiComponents/lines/vector4LineComponent'; import { Vector2LineComponent } from '../../../../../sharedUiComponents/lines/vector2LineComponent'; import { TextureLinkLineComponent } from '../../../lines/textureLinkLineComponent'; import { SliderLineComponent } from '../../../../../sharedUiComponents/lines/sliderLineComponent'; import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/Enums/nodeMaterialBlockConnectionPointTypes'; import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock'; import { GradientPropertyTabComponent } from '../../gradientNodePropertyComponent'; import { Color4LineComponent } from "../../../../../sharedUiComponents/lines/color4LineComponent"; interface INodeMaterialPropertyGridComponentProps { globalState: GlobalState; material: NodeMaterial; lockObject: LockObject; onSelectionChangedObservable?: Observable; onPropertyChangedObservable?: Observable; } export class NodeMaterialPropertyGridComponent extends React.Component { private _onDebugSelectionChangeObservable = new Observable(); constructor(props: INodeMaterialPropertyGridComponentProps) { super(props); } edit() { this.props.material.edit(); } renderTextures() { const material = this.props.material; const onDebugSelectionChangeObservable = this._onDebugSelectionChangeObservable; let textureBlocks = material.getTextureBlocks(); if (!textureBlocks || textureBlocks.length === 0) { return null; } return ( { textureBlocks.map((textureBlock, i) => { return ( textureBlock.texture = texture} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} /> ) }) } ); } renderInputBlock(block: InputBlock) { switch (block.type) { case NodeMaterialBlockConnectionPointTypes.Float: let cantDisplaySlider = (isNaN(block.min) || isNaN(block.max) || block.min === block.max); return (
{ block.isBoolean && } { !block.isBoolean && cantDisplaySlider && } { !block.isBoolean && !cantDisplaySlider && }
); case NodeMaterialBlockConnectionPointTypes.Color3: return ( ) case NodeMaterialBlockConnectionPointTypes.Color4: return ( ) case NodeMaterialBlockConnectionPointTypes.Vector2: return ( ) case NodeMaterialBlockConnectionPointTypes.Vector3: return ( ) case NodeMaterialBlockConnectionPointTypes.Vector4: return ( ) } return null; } renderInputValues() { let configurableInputBlocks = this.props.material.getInputBlocks().filter(block => { return block.visibleInInspector && block.isUniform && !block.isSystemValue }).sort( (a, b) => { return a.name.localeCompare(b.name); }); let namedGroups: string[] = []; configurableInputBlocks.forEach(block => { if (!block.groupInInspector) { return; } if (namedGroups.indexOf(block.groupInInspector) === -1) { namedGroups.push(block.groupInInspector); } }); namedGroups.sort(); let gradiantNodeMaterialBlocks = this.props.material.attachedBlocks.filter(block => { return block.visibleInInspector && block.getClassName() === 'GradientBlock' }).sort( (a, b) => { return a.name.localeCompare(b.name); }); let inputBlockContainer = configurableInputBlocks.length > 0 ? { configurableInputBlocks.filter(block => !block.groupInInspector).map(block => { return this.renderInputBlock(block); }) } : null; return ( <> {inputBlockContainer} { namedGroups.map((name, i) => { return ( { configurableInputBlocks.filter(block => block.groupInInspector === name).map(block => { return this.renderInputBlock(block); }) } ) }) } { gradiantNodeMaterialBlocks.map((block,i) => { return ( { } ) }) } ); } render() { const material = this.props.material; return (
this.edit()} /> { this.renderInputValues() } { this.renderTextures() }
); } }