|
@@ -37,32 +37,32 @@ interface IPropertyTabComponentProps {
|
|
|
globalState: GlobalState;
|
|
|
}
|
|
|
|
|
|
-interface IPropertyTabComponentState {
|
|
|
- currentNode: Nullable<GraphNode>,
|
|
|
- currentFrame: Nullable<GraphFrame>,
|
|
|
- currentFrameNodePort: Nullable<FrameNodePort>,
|
|
|
- currentNodePort: Nullable<NodePort>
|
|
|
+interface IPropertyTabComponentState {
|
|
|
+ currentNode: Nullable<GraphNode>;
|
|
|
+ currentFrame: Nullable<GraphFrame>;
|
|
|
+ currentFrameNodePort: Nullable<FrameNodePort>;
|
|
|
+ currentNodePort: Nullable<NodePort>;
|
|
|
}
|
|
|
|
|
|
export class PropertyTabComponent extends React.Component<IPropertyTabComponentProps, IPropertyTabComponentState> {
|
|
|
private _onBuiltObserver: Nullable<Observer<void>>;
|
|
|
|
|
|
constructor(props: IPropertyTabComponentProps) {
|
|
|
- super(props)
|
|
|
+ super(props);
|
|
|
|
|
|
this.state = { currentNode: null, currentFrame: null, currentFrameNodePort: null, currentNodePort: null };
|
|
|
}
|
|
|
|
|
|
componentDidMount() {
|
|
|
- this.props.globalState.onSelectionChangedObservable.add(selection => {
|
|
|
+ this.props.globalState.onSelectionChangedObservable.add((selection) => {
|
|
|
if (selection instanceof GraphNode) {
|
|
|
this.setState({ currentNode: selection, currentFrame: null, currentFrameNodePort: null, currentNodePort: null });
|
|
|
} else if (selection instanceof GraphFrame) {
|
|
|
this.setState({ currentNode: null, currentFrame: selection, currentFrameNodePort: null, currentNodePort: null });
|
|
|
- } else if(isFramePortData(selection)) {
|
|
|
+ } else if (isFramePortData(selection)) {
|
|
|
this.setState({ currentNode: null, currentFrame: selection.frame, currentFrameNodePort: selection.port, currentNodePort: null });
|
|
|
} else if (selection instanceof NodePort && selection.hasLabel()) {
|
|
|
- this.setState({ currentNode: null, currentFrame: null, currentFrameNodePort: null, currentNodePort: selection})
|
|
|
+ this.setState({ currentNode: null, currentFrame: null, currentFrameNodePort: null, currentNodePort: selection});
|
|
|
} else {
|
|
|
this.setState({ currentNode: null, currentFrame: null, currentFrameNodePort: null, currentNodePort: null });
|
|
|
}
|
|
@@ -90,57 +90,57 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
|
|
|
case NodeMaterialBlockConnectionPointTypes.Float:
|
|
|
let cantDisplaySlider = (isNaN(block.min) || isNaN(block.max) || block.min === block.max);
|
|
|
return (
|
|
|
- <div key={block.uniqueId} >
|
|
|
+ <div key={block.uniqueId} >
|
|
|
{
|
|
|
block.isBoolean &&
|
|
|
- <CheckBoxLineComponent key={block.uniqueId} label={block.name} target={block} propertyName="value"
|
|
|
+ <CheckBoxLineComponent key={block.uniqueId} label={block.name} target={block} propertyName="value"
|
|
|
onValueChanged={() => {
|
|
|
this.processInputBlockUpdate(block);
|
|
|
}}/>
|
|
|
}
|
|
|
{
|
|
|
!block.isBoolean && cantDisplaySlider &&
|
|
|
- <FloatLineComponent globalState={this.props.globalState} key={block.uniqueId} label={block.name} target={block} propertyName="value"
|
|
|
+ <FloatLineComponent globalState={this.props.globalState} key={block.uniqueId} label={block.name} target={block} propertyName="value"
|
|
|
onChange={() => this.processInputBlockUpdate(block)}/>
|
|
|
- }
|
|
|
+ }
|
|
|
{
|
|
|
!block.isBoolean && !cantDisplaySlider &&
|
|
|
- <SliderLineComponent key={block.uniqueId} label={block.name} target={block} propertyName="value"
|
|
|
+ <SliderLineComponent key={block.uniqueId} 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.uniqueId} label={block.name} target={block}
|
|
|
- propertyName="value"
|
|
|
+ <Color3LineComponent globalState={this.props.globalState} key={block.uniqueId} label={block.name} target={block}
|
|
|
+ propertyName="value"
|
|
|
onChange={() => this.processInputBlockUpdate(block)}
|
|
|
/>
|
|
|
- )
|
|
|
+ );
|
|
|
case NodeMaterialBlockConnectionPointTypes.Color4:
|
|
|
return (
|
|
|
- <Color4LineComponent globalState={this.props.globalState} key={block.uniqueId} label={block.name} target={block} propertyName="value"
|
|
|
+ <Color4LineComponent globalState={this.props.globalState} key={block.uniqueId} label={block.name} target={block} propertyName="value"
|
|
|
onChange={() => this.processInputBlockUpdate(block)}/>
|
|
|
- )
|
|
|
+ );
|
|
|
case NodeMaterialBlockConnectionPointTypes.Vector2:
|
|
|
return (
|
|
|
- <Vector2LineComponent globalState={this.props.globalState} key={block.uniqueId} label={block.name} target={block}
|
|
|
- propertyName="value"
|
|
|
+ <Vector2LineComponent globalState={this.props.globalState} key={block.uniqueId} label={block.name} target={block}
|
|
|
+ propertyName="value"
|
|
|
onChange={() => this.processInputBlockUpdate(block)}/>
|
|
|
- )
|
|
|
+ );
|
|
|
case NodeMaterialBlockConnectionPointTypes.Vector3:
|
|
|
return (
|
|
|
- <Vector3LineComponent globalState={this.props.globalState} key={block.uniqueId} label={block.name} target={block}
|
|
|
- propertyName="value"
|
|
|
+ <Vector3LineComponent globalState={this.props.globalState} key={block.uniqueId} label={block.name} target={block}
|
|
|
+ propertyName="value"
|
|
|
onChange={() => this.processInputBlockUpdate(block)}/>
|
|
|
- )
|
|
|
+ );
|
|
|
case NodeMaterialBlockConnectionPointTypes.Vector4:
|
|
|
return (
|
|
|
- <Vector4LineComponent globalState={this.props.globalState} key={block.uniqueId} label={block.name} target={block}
|
|
|
- propertyName="value"
|
|
|
+ <Vector4LineComponent globalState={this.props.globalState} key={block.uniqueId} label={block.name} target={block}
|
|
|
+ propertyName="value"
|
|
|
onChange={() => this.processInputBlockUpdate(block)}/>
|
|
|
- )
|
|
|
+ );
|
|
|
}
|
|
|
return null;
|
|
|
}
|
|
@@ -162,7 +162,7 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
|
|
|
this.props.globalState.onLogRequiredObservable.notifyObservers({message: "Saving your material to Babylon.js snippet server...", isError: false});
|
|
|
this.props.globalState.customSave!.action(SerializationTools.Serialize(this.props.globalState.nodeMaterial, this.props.globalState)).then(() => {
|
|
|
this.props.globalState.onLogRequiredObservable.notifyObservers({message: "Material saved successfully", isError: false});
|
|
|
- }).catch(err => {
|
|
|
+ }).catch((err) => {
|
|
|
this.props.globalState.onLogRequiredObservable.notifyObservers({message: err, isError: true});
|
|
|
});
|
|
|
}
|
|
@@ -170,7 +170,7 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
|
|
|
saveToSnippetServer() {
|
|
|
const material = this.props.globalState.nodeMaterial;
|
|
|
const xmlHttp = new XMLHttpRequest();
|
|
|
-
|
|
|
+
|
|
|
let json = SerializationTools.Serialize(material, this.props.globalState);
|
|
|
|
|
|
xmlHttp.onreadystatechange = () => {
|
|
@@ -198,13 +198,13 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
|
|
|
}
|
|
|
|
|
|
alert("NodeMaterial saved with ID: " + material.snippetId + " (please note that the id was also saved to your clipboard)");
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
else {
|
|
|
alert(`Unable to save your node material. It may be too large (${(dataToSend.payload.length / 1024).toFixed(2)} KB) because of embedded textures. Please reduce texture sizes or point to a specific url instead of embedding them and try again.`);
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
+ };
|
|
|
|
|
|
xmlHttp.open("POST", NodeMaterial.SnippetUrl + (material.snippetId ? "/" + material.snippetId : ""), true);
|
|
|
xmlHttp.setRequestHeader("Content-Type", "application/json");
|
|
@@ -230,16 +230,16 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
|
|
|
if (!snippedID) {
|
|
|
return;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
|
|
|
|
|
|
NodeMaterial.ParseFromSnippetAsync(snippedID, scene, "", material).then(() => {
|
|
|
material.build();
|
|
|
this.props.globalState.onResetRequiredObservable.notifyObservers();
|
|
|
- }).catch(err => {
|
|
|
+ }).catch((err) => {
|
|
|
alert("Unable to load your node material: " + err);
|
|
|
});
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
render() {
|
|
|
if (this.state.currentNode) {
|
|
@@ -255,7 +255,7 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
|
|
|
</div>
|
|
|
);
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
if (this.state.currentFrameNodePort && this.state.currentFrame) {
|
|
|
return (
|
|
|
<FrameNodePortPropertyTabComponent globalState={this.props.globalState} frame={this.state.currentFrame} frameNodePort={this.state.currentFrameNodePort}/>
|
|
@@ -302,30 +302,30 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
|
|
|
}} />
|
|
|
</LineContainerComponent>
|
|
|
<LineContainerComponent title="OPTIONS">
|
|
|
- <CheckBoxLineComponent label="Embed textures when saving"
|
|
|
+ <CheckBoxLineComponent label="Embed textures when saving"
|
|
|
isSelected={() => DataStorage.ReadBoolean("EmbedTextures", true)}
|
|
|
onSelect={(value: boolean) => {
|
|
|
DataStorage.WriteBoolean("EmbedTextures", value);
|
|
|
}}
|
|
|
/>
|
|
|
- <SliderLineComponent label="Grid size" minimum={0} maximum={100} step={5}
|
|
|
- decimalCount={0}
|
|
|
+ <SliderLineComponent label="Grid size" minimum={0} maximum={100} step={5}
|
|
|
+ decimalCount={0}
|
|
|
directValue={gridSize}
|
|
|
- onChange={value => {
|
|
|
- DataStorage.WriteNumber("GridSize", value);
|
|
|
+ onChange={(value) => {
|
|
|
+ DataStorage.WriteNumber("GridSize", value);
|
|
|
this.props.globalState.onGridSizeChanged.notifyObservers();
|
|
|
this.forceUpdate();
|
|
|
}}
|
|
|
/>
|
|
|
- <CheckBoxLineComponent label="Show grid"
|
|
|
+ <CheckBoxLineComponent label="Show grid"
|
|
|
isSelected={() => DataStorage.ReadBoolean("ShowGrid", true)}
|
|
|
onSelect={(value: boolean) => {
|
|
|
- DataStorage.WriteBoolean("ShowGrid", value);
|
|
|
+ DataStorage.WriteBoolean("ShowGrid", value);
|
|
|
this.props.globalState.onGridSizeChanged.notifyObservers();
|
|
|
}}
|
|
|
/>
|
|
|
</LineContainerComponent>
|
|
|
- <LineContainerComponent title="FILE">
|
|
|
+ <LineContainerComponent title="FILE">
|
|
|
<FileButtonLineComponent label="Load" onClick={(file) => this.load(file)} accept=".json" />
|
|
|
<ButtonLineComponent label="Save" onClick={() => {
|
|
|
this.save();
|
|
@@ -337,29 +337,29 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
|
|
|
StringTools.DownloadAsFile(this.props.globalState.hostDocument, this.props.globalState.nodeMaterial!.compiledShaders, "shaders.txt");
|
|
|
}} />
|
|
|
{
|
|
|
- this.props.globalState.customSave &&
|
|
|
+ this.props.globalState.customSave &&
|
|
|
<ButtonLineComponent label={this.props.globalState.customSave!.label} onClick={() => {
|
|
|
this.customSave();
|
|
|
}} />
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- </LineContainerComponent>
|
|
|
+ </LineContainerComponent>
|
|
|
{
|
|
|
- !this.props.globalState.customSave &&
|
|
|
- <LineContainerComponent title="SNIPPET">
|
|
|
+ !this.props.globalState.customSave &&
|
|
|
+ <LineContainerComponent title="SNIPPET">
|
|
|
{
|
|
|
this.props.globalState.nodeMaterial!.snippetId &&
|
|
|
<TextLineComponent label="Snippet ID" value={this.props.globalState.nodeMaterial!.snippetId} />
|
|
|
- }
|
|
|
+ }
|
|
|
<ButtonLineComponent label="Load from snippet server" onClick={() => this.loadFromSnippet()} />
|
|
|
<ButtonLineComponent label="Save to snippet server" onClick={() => {
|
|
|
this.saveToSnippetServer();
|
|
|
}} />
|
|
|
- </LineContainerComponent>
|
|
|
- }
|
|
|
- <LineContainerComponent title="INPUTS">
|
|
|
+ </LineContainerComponent>
|
|
|
+ }
|
|
|
+ <LineContainerComponent title="INPUTS">
|
|
|
{
|
|
|
- this.props.globalState.nodeMaterial.getInputBlocks().map(ib => {
|
|
|
+ this.props.globalState.nodeMaterial.getInputBlocks().map((ib) => {
|
|
|
if (!ib.isUniform || ib.isSystemValue || !ib.name) {
|
|
|
return null;
|
|
|
}
|