Popov72 před 5 roky
rodič
revize
b1fd54e0f4

+ 55 - 55
nodeEditor/src/components/propertyTab/propertyTabComponent.tsx

@@ -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;
                             }