import * as React from "react" ; import { LineContainerComponent } from "../../sharedComponents/lineContainerComponent" ; import { OptionsLineComponent } from "../../sharedComponents/optionsLineComponent" ; import { IPropertyComponentProps } from "./propertyComponentProps" ; import { GeneralPropertyTabComponent } from "./genericNodePropertyComponent" ; import { ColorMergerBlock } from "babylonjs/Materials/Node/Blocks/colorMergerBlock" ; export class ColorMergerPropertyTabComponent extends React . Component < IPropertyComponentProps > { constructor ( props ) { super ( props ) ; } render ( ) { let colorMergerBlock = this . props . block as ColorMergerBlock ; var targetOptions = [ { label : "R" , value : "r" } , { label : "G" , value : "g" } , { label : "B" , value : "b" } , { label : "A" , value : "a" } , ] ; return ( < div > < GeneralPropertyTabComponent globalState = { this . props . globalState } block = { this . props . block } / > < LineContainerComponent title = "SWIZZLES" > < OptionsLineComponent label = "R" options = { targetOptions } target = { colorMergerBlock } propertyName = "rSwizzle" valuesAreStrings = { true } onSelect = { ( value ) => { this . props . globalState . onUpdateRequiredObservable . notifyObservers ( this . props . block ) ; this . props . globalState . onRebuildRequiredObservable . notifyObservers ( true ) ; this . forceUpdate ( ) ; } } /> < OptionsLineComponent label = "G" options = { targetOptions } target = { colorMergerBlock } propertyName = "gSwizzle" valuesAreStrings = { true } onSelect = { ( value ) => { this . props . globalState . onUpdateRequiredObservable . notifyObservers ( this . props . block ) ; this . props . globalState . onRebuildRequiredObservable . notifyObservers ( true ) ; this . forceUpdate ( ) ; } } /> < OptionsLineComponent label = "B" options = { targetOptions } target = { colorMergerBlock } propertyName = "bSwizzle" valuesAreStrings = { true } onSelect = { ( value ) => { this . props . globalState . onUpdateRequiredObservable . notifyObservers ( this . props . block ) ; this . props . globalState . onRebuildRequiredObservable . notifyObservers ( true ) ; this . forceUpdate ( ) ; } } /> < OptionsLineComponent label = "A" options = { targetOptions } target = { colorMergerBlock } propertyName = "aSwizzle" valuesAreStrings = { true } onSelect = { ( value ) => { this . props . globalState . onUpdateRequiredObservable . notifyObservers ( this . props . block ) ; this . props . globalState . onRebuildRequiredObservable . notifyObservers ( true ) ; this . forceUpdate ( ) ; } } /> < /LineContainerComponent> < /div>); } }